From b6e7407e63f6056cf78ddec4f3f9481d57ac2a86 Mon Sep 17 00:00:00 2001
From: BBQ <35603386+HoneyBBQ@users.noreply.github.com>
Date: Tue, 3 Mar 2026 16:00:21 +0800
Subject: [PATCH] fix(web): prevent bot history horizontal overflow and
 pagination wrapping (#166)

Ensure long history message content can wrap without expanding layout width, and keep pagination summary and controls on a stable single line.
---
 .../src/components/master-detail-sidebar-layout/index.vue    | 2 +-
 packages/web/src/pages/bots/components/bot-history.vue       | 5 +++--
 packages/web/src/pages/bots/components/message-list.vue      | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/master-detail-sidebar-layout/index.vue b/packages/web/src/components/master-detail-sidebar-layout/index.vue
index 0c99c4ff..34a9baee 100644
--- a/packages/web/src/components/master-detail-sidebar-layout/index.vue
+++ b/packages/web/src/components/master-detail-sidebar-layout/index.vue
@@ -16,7 +16,7 @@
             <slot name="sidebar-footer" />
           </SidebarFooter>
         </Sidebar>
-        <section class="flex-1 h-full">
+        <section class="flex-1 min-w-0 h-full">
           <slot name="detail" />
         </section>
       </SidebarProvider>
diff --git a/packages/web/src/pages/bots/components/bot-history.vue b/packages/web/src/pages/bots/components/bot-history.vue
index 835944a2..1bf3310d 100644
--- a/packages/web/src/pages/bots/components/bot-history.vue
+++ b/packages/web/src/pages/bots/components/bot-history.vue
@@ -82,9 +82,9 @@
       <!-- Pagination -->
       <div
         v-if="totalPages > 1"
-        class="flex items-center justify-between pt-4"
+        class="flex items-center justify-between gap-3 pt-4"
       >
-        <span class="text-sm text-muted-foreground">
+        <span class="shrink-0 whitespace-nowrap text-sm text-muted-foreground">
           {{ paginationSummary }}
         </span>
         <Pagination
@@ -92,6 +92,7 @@
           :items-per-page="PAGE_SIZE"
           :sibling-count="1"
           :page="currentPage"
+          class="w-auto shrink-0"
           show-edges
           @update:page="currentPage = $event"
         >
diff --git a/packages/web/src/pages/bots/components/message-list.vue b/packages/web/src/pages/bots/components/message-list.vue
index e124235d..3a6ebfd6 100644
--- a/packages/web/src/pages/bots/components/message-list.vue
+++ b/packages/web/src/pages/bots/components/message-list.vue
@@ -51,7 +51,7 @@
             :class="{ 'font-mono text-xs': msg.role === 'tool' || msg.role === 'system' }"
           >
             <div
-              class="whitespace-pre-wrap wrap-break-word"
+              class="whitespace-pre-wrap break-words [overflow-wrap:anywhere]"
               :class="{ 'line-clamp-4': !expandedIds.includes(msgKey(msg, idx)) }"
             >
               {{ formatContent(msg.content) }}