style: prevent node detail overflows

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" />

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 })"
     />