From e583b92cbf27bc8536dd28e7cce83df0c246c5bc Mon Sep 17 00:00:00 2001
From: AnotiaWang <anotia0202@gmail.com>
Date: Thu, 27 Feb 2025 09:35:39 +0800
Subject: [PATCH] style: prevent node detail overflows

---
 components/DeepResearch/DeepResearch.vue | 8 +++-----
 components/DeepResearch/NodeDetail.vue   | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/DeepResearch/DeepResearch.vue b/components/DeepResearch/DeepResearch.vue
index 98eafe0..41619d0 100644
--- a/components/DeepResearch/DeepResearch.vue
+++ b/components/DeepResearch/DeepResearch.vue
@@ -349,7 +349,7 @@
 </script>
 
 <template>
-  <UModal v-if="isFullscreen" open fullscreen>
+  <UModal v-if="isFullscreen" open fullscreen :ui="{ body: '!pr-0' }">
     <template #header>
       <div class="flex items-center justify-between">
         <div>
@@ -382,10 +382,8 @@
         <div
           v-if="selectedNode"
           :class="[
-            'border-gray-100 dark:border-gray-800',
-            isLargeScreen
-              ? 'border-l w-1/3 pl-4 sm:pl-6'
-              : 'h-1/2 overflow-y-scroll',
+            'border-gray-100 dark:border-gray-800 px-4 sm:px-6 overflow-y-auto',
+            isLargeScreen ? 'border-l w-1/3' : 'h-1/2 pt-2',
           ]"
         >
           <NodeDetail :node="selectedNode" @retry="retryNode" />
diff --git a/components/DeepResearch/NodeDetail.vue b/components/DeepResearch/NodeDetail.vue
index b6a23c0..f82b651 100644
--- a/components/DeepResearch/NodeDetail.vue
+++ b/components/DeepResearch/NodeDetail.vue
@@ -44,7 +44,7 @@
     </p>
     <p
       v-if="node.researchGoal"
-      class="prose max-w-none dark:prose-invert"
+      class="prose max-w-none dark:prose-invert break-words"
       v-html="marked(node.researchGoal, { gfm: true })"
     />
 
@@ -86,7 +86,7 @@
     />
     <p
       v-for="(learning, index) in node.learnings"
-      class="prose max-w-none dark:prose-invert"
+      class="prose max-w-none dark:prose-invert break-words"
       :key="index"
       v-html="marked(`- ${learning}`, { gfm: true })"
     />