From 4a69906757d7185b548b2ca788ec9b7a1951588b Mon Sep 17 00:00:00 2001
From: kawayiYokami <95584793+kawayiYokami@users.noreply.github.com>
Date: Sat, 30 May 2026 21:36:51 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(dashboard):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=BB=9A=E5=8A=A8=E6=9D=A1=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E5=8D=A0=E4=BD=8D=EF=BC=8C=E8=BF=9B=E5=85=A5=E6=89=8D=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/OverlayScrollbar.vue    | 237 ++++++++++++++++++
 dashboard/src/layouts/full/FullLayout.vue     |  38 +--
 .../full/vertical-sidebar/VerticalSidebar.vue |  13 +-
 dashboard/src/scss/layout/_container.scss     |   3 +-
 dashboard/src/scss/layout/_sidebar.scss       |   7 +-
 dashboard/src/views/ConfigPage.vue            |   2 +-
 .../src/views/extension/PluginDetailPage.vue  |   2 +-
 7 files changed, 274 insertions(+), 28 deletions(-)
 create mode 100644 dashboard/src/components/shared/OverlayScrollbar.vue

diff --git a/dashboard/src/components/shared/OverlayScrollbar.vue b/dashboard/src/components/shared/OverlayScrollbar.vue
new file mode 100644
index 0000000000..eda29fbd12
--- /dev/null
+++ b/dashboard/src/components/shared/OverlayScrollbar.vue
@@ -0,0 +1,237 @@
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
+
+const props = defineProps({
+  // Minimum thumb height in pixels
+  minThumbSize: {
+    type: Number,
+    default: 32
+  },
+  // Hide the thumb automatically after scrolling stops
+  autoHide: {
+    type: Boolean,
+    default: true
+  },
+  // Delay (ms) before auto hiding after the pointer leaves / scroll stops
+  hideDelay: {
+    type: Number,
+    default: 800
+  }
+});
+
+const viewport = ref(null); // scrollable element
+const thumb = ref(null);
+const trackVisible = ref(false); // pointer is over the area
+const scrolling = ref(false); // recently scrolled
+const dragging = ref(false);
+
+const thumbHeight = ref(0);
+const thumbTop = ref(0);
+const hasOverflow = ref(false);
+
+let hideTimer = null;
+let dragStartY = 0;
+let dragStartScrollTop = 0;
+let resizeObserver = null;
+let mutationObserver = null;
+
+function updateThumb() {
+  const el = viewport.value;
+  if (!el) return;
+  const { scrollHeight, clientHeight, scrollTop } = el;
+  hasOverflow.value = scrollHeight > clientHeight + 1;
+  if (!hasOverflow.value) {
+    thumbHeight.value = 0;
+    return;
+  }
+  const ratio = clientHeight / scrollHeight;
+  const rawHeight = Math.max(clientHeight * ratio, props.minThumbSize);
+  thumbHeight.value = rawHeight;
+  const maxThumbTop = clientHeight - rawHeight;
+  const maxScrollTop = scrollHeight - clientHeight;
+  thumbTop.value = maxScrollTop > 0 ? (scrollTop / maxScrollTop) * maxThumbTop : 0;
+}
+
+function flagScrolling() {
+  scrolling.value = true;
+  if (!props.autoHide) return;
+  if (hideTimer) clearTimeout(hideTimer);
+  hideTimer = setTimeout(() => {
+    if (!dragging.value && !trackVisible.value) {
+      scrolling.value = false;
+    }
+  }, props.hideDelay);
+}
+
+function onScroll() {
+  updateThumb();
+  flagScrolling();
+}
+
+function onPointerEnter() {
+  trackVisible.value = true;
+}
+
+function onPointerLeave() {
+  trackVisible.value = false;
+  if (props.autoHide && !dragging.value) {
+    if (hideTimer) clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      scrolling.value = false;
+    }, props.hideDelay);
+  }
+}
+
+function onThumbPointerDown(event) {
+  if (!hasOverflow.value) return;
+  event.preventDefault();
+  event.stopPropagation();
+  dragging.value = true;
+  dragStartY = event.clientY;
+  dragStartScrollTop = viewport.value.scrollTop;
+  document.body.style.userSelect = 'none';
+  window.addEventListener('pointermove', onThumbPointerMove);
+  window.addEventListener('pointerup', onThumbPointerUp);
+}
+
+function onThumbPointerMove(event) {
+  if (!dragging.value) return;
+  const el = viewport.value;
+  const { scrollHeight, clientHeight } = el;
+  const maxThumbTop = clientHeight - thumbHeight.value;
+  const maxScrollTop = scrollHeight - clientHeight;
+  const deltaY = event.clientY - dragStartY;
+  const scrollPerPixel = maxThumbTop > 0 ? maxScrollTop / maxThumbTop : 0;
+  el.scrollTop = dragStartScrollTop + deltaY * scrollPerPixel;
+}
+
+function onThumbPointerUp() {
+  dragging.value = false;
+  document.body.style.userSelect = '';
+  window.removeEventListener('pointermove', onThumbPointerMove);
+  window.removeEventListener('pointerup', onThumbPointerUp);
+  if (props.autoHide && !trackVisible.value) {
+    scrolling.value = false;
+  }
+}
+
+// Click on the track jumps the thumb toward the click position
+function onTrackPointerDown(event) {
+  if (!hasOverflow.value || event.target === thumb.value) return;
+  const el = viewport.value;
+  const rect = el.getBoundingClientRect();
+  const clickY = event.clientY - rect.top;
+  const targetThumbTop = clickY - thumbHeight.value / 2;
+  const maxThumbTop = el.clientHeight - thumbHeight.value;
+  const maxScrollTop = el.scrollHeight - el.clientHeight;
+  const clamped = Math.min(Math.max(targetThumbTop, 0), maxThumbTop);
+  el.scrollTop = maxThumbTop > 0 ? (clamped / maxThumbTop) * maxScrollTop : 0;
+}
+
+onMounted(() => {
+  nextTick(updateThumb);
+  if (window.ResizeObserver) {
+    resizeObserver = new ResizeObserver(() => updateThumb());
+    resizeObserver.observe(viewport.value);
+    if (viewport.value.firstElementChild) {
+      resizeObserver.observe(viewport.value.firstElementChild);
+    }
+  }
+  // Watch for content changes (e.g. groups expanding/collapsing)
+  mutationObserver = new MutationObserver(() => updateThumb());
+  mutationObserver.observe(viewport.value, { childList: true, subtree: true });
+});
+
+onUnmounted(() => {
+  if (hideTimer) clearTimeout(hideTimer);
+  if (resizeObserver) resizeObserver.disconnect();
+  if (mutationObserver) mutationObserver.disconnect();
+  window.removeEventListener('pointermove', onThumbPointerMove);
+  window.removeEventListener('pointerup', onThumbPointerUp);
+});
+
+// Allow parent to trigger recomputation
+defineExpose({ updateThumb, viewport });
+</script>
+
+<template>
+  <div class="overlay-scrollbar" @pointerenter="onPointerEnter" @pointerleave="onPointerLeave">
+    <div ref="viewport" class="overlay-scrollbar__viewport" @scroll="onScroll">
+      <slot />
+    </div>
+    <div
+      class="overlay-scrollbar__track"
+      :class="{ 'is-visible': hasOverflow && (trackVisible || scrolling || dragging) }"
+      @pointerdown="onTrackPointerDown"
+    >
+      <div
+        ref="thumb"
+        class="overlay-scrollbar__thumb"
+        :class="{ 'is-dragging': dragging }"
+        :style="{ height: thumbHeight + 'px', transform: `translateY(${thumbTop}px)` }"
+        @pointerdown="onThumbPointerDown"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.overlay-scrollbar {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.overlay-scrollbar__viewport {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* Hide native scrollbar without reserving layout space */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.overlay-scrollbar__viewport::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.overlay-scrollbar__track {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  width: 10px;
+  border-radius: 5px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: 5;
+}
+
+.overlay-scrollbar__track.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.overlay-scrollbar__thumb {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  margin-right: 2px;
+  border-radius: 4px;
+  background: rgba(var(--v-theme-primary), 0.45);
+  cursor: pointer;
+  transition: width 0.15s ease, background-color 0.15s ease;
+  will-change: transform;
+}
+
+.overlay-scrollbar__track:hover .overlay-scrollbar__thumb,
+.overlay-scrollbar__thumb.is-dragging {
+  width: 8px;
+  background: rgba(var(--v-theme-primary), 0.7);
+}
+</style>
diff --git a/dashboard/src/layouts/full/FullLayout.vue b/dashboard/src/layouts/full/FullLayout.vue
index e409661440..e6013af9f0 100644
--- a/dashboard/src/layouts/full/FullLayout.vue
+++ b/dashboard/src/layouts/full/FullLayout.vue
@@ -7,6 +7,7 @@ import VerticalHeaderVue from "./vertical-header/VerticalHeader.vue";
 import MigrationDialog from "@/components/shared/MigrationDialog.vue";
 import ReadmeDialog from "@/components/shared/ReadmeDialog.vue";
 import Chat from "@/components/chat/Chat.vue";
+import OverlayScrollbar from "@/components/shared/OverlayScrollbar.vue";
 import { useCustomizerStore } from "@/stores/customizer";
 import { useRouterLoadingStore } from "@/stores/routerLoading";
 import { useCommonStore } from "@/stores/common";
@@ -127,28 +128,23 @@ onMounted(() => {
       <VerticalHeaderVue />
       <VerticalSidebarVue v-if="showSidebar" />
       <v-main
-        :style="{
-          height: isCurrentChatRoute ? 'calc(100vh - 55px)' : undefined,
-          overflow: isCurrentChatRoute ? 'hidden' : undefined,
-        }"
+        style="overflow: hidden; height: calc(100vh - 50px);"
       >
+        <OverlayScrollbar v-if="!isCurrentChatRoute" class="main-scrollbar">
+          <v-container
+            fluid
+            class="page-wrapper"
+          >
+            <RouterView />
+          </v-container>
+        </OverlayScrollbar>
         <v-container
+          v-else
           fluid
-          class="page-wrapper"
-          :class="{ 'chat-mode-container': isCurrentChatRoute }"
-          :style="{
-            height: isCurrentChatRoute ? '100%' : 'calc(100% - 8px)',
-            padding: isCurrentChatRoute ? '0' : undefined,
-            minHeight: isCurrentChatRoute ? 'unset' : undefined,
-          }"
+          class="page-wrapper chat-mode-container"
+          style="height: 100%; padding: 0; min-height: unset;"
         >
-          <div
-            :style="{
-              height: '100%',
-              width: '100%',
-              overflow: isCurrentChatRoute ? 'hidden' : undefined,
-            }"
-          >
+          <div style="height: 100%; width: 100%; overflow: hidden;">
             <div
               v-if="shouldMountChat"
               v-show="isCurrentChatRoute"
@@ -156,7 +152,6 @@ onMounted(() => {
             >
               <Chat :active="isCurrentChatRoute" />
             </div>
-            <RouterView v-if="!isCurrentChatRoute" />
           </div>
         </v-container>
       </v-main>
@@ -177,4 +172,9 @@ onMounted(() => {
   height: 100% !important;
   overflow: hidden !important;
 }
+
+.main-scrollbar {
+  height: 100%;
+  width: 100%;
+}
 </style>
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index a3c1da81e2..90b027ced2 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -7,6 +7,7 @@ import sidebarItems from './sidebarItem';
 import NavItem from './NavItem.vue';
 import { applySidebarCustomization } from '@/utils/sidebarCustomization';
 import ChangelogDialog from '@/components/shared/ChangelogDialog.vue';
+import OverlayScrollbar from '@/components/shared/OverlayScrollbar.vue';
 
 const { t, locale } = useI18n();
 
@@ -294,11 +295,13 @@ function openChangelogDialog() {
     :rail="customizer.mini_sidebar"
   >
     <div class="sidebar-container">
-      <v-list :class="['pa-4', 'listitem', 'flex-grow-1', { 'hidden-scrollbar': customizer.mini_sidebar }]" v-model:opened="openedItems" :open-strategy="'multiple'">
-        <template v-for="(item, i) in sidebarMenu" :key="item.title || item.to || `sidebar-item-${i}`">
-          <NavItem :item="item" class="leftPadding" />
-        </template>
-      </v-list>
+      <OverlayScrollbar class="sidebar-scroll flex-grow-1">
+        <v-list :class="['pa-4', 'listitem', { 'hidden-scrollbar': customizer.mini_sidebar }]" v-model:opened="openedItems" :open-strategy="'multiple'">
+          <template v-for="(item, i) in sidebarMenu" :key="item.title || item.to || `sidebar-item-${i}`">
+            <NavItem :item="item" class="leftPadding" />
+          </template>
+        </v-list>
+      </OverlayScrollbar>
       <div class="sidebar-footer" v-if="!customizer.mini_sidebar">
         <v-btn class="sidebar-footer-btn" size="small" variant="tonal" color="primary" to="/settings" prepend-icon="mdi-cog">
           {{ t('core.navigation.settings') }}
diff --git a/dashboard/src/scss/layout/_container.scss b/dashboard/src/scss/layout/_container.scss
index c2e71b843a..682f9d2356 100644
--- a/dashboard/src/scss/layout/_container.scss
+++ b/dashboard/src/scss/layout/_container.scss
@@ -1,8 +1,9 @@
 html {
-  overflow-y: auto;
+  overflow: hidden;
 }
 .v-main {
   margin: 0;
+  overflow: hidden;
 }
 
 .top-header {
diff --git a/dashboard/src/scss/layout/_sidebar.scss b/dashboard/src/scss/layout/_sidebar.scss
index 52f9e404a3..9436519d6c 100644
--- a/dashboard/src/scss/layout/_sidebar.scss
+++ b/dashboard/src/scss/layout/_sidebar.scss
@@ -5,7 +5,6 @@
   box-shadow: none !important;
 }
 .listitem {
-  overflow-y: auto;
   .v-list {
     color: rgb(var(--v-theme-secondaryText));
   }
@@ -98,6 +97,12 @@
       flex: 1 1 auto;
       overflow-y: auto;
     }
+
+    .sidebar-scroll {
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow: hidden;
+    }
     
     .sidebar-footer {
       padding: 16px;
diff --git a/dashboard/src/views/ConfigPage.vue b/dashboard/src/views/ConfigPage.vue
index 0af226afbd..ea8a3deb82 100644
--- a/dashboard/src/views/ConfigPage.vue
+++ b/dashboard/src/views/ConfigPage.vue
@@ -905,7 +905,7 @@ export default {
 
 .unsaved-changes-banner-wrap {
   position: sticky;
-  top: calc(var(--v-layout-top, 64px));
+  top: 0;
   z-index: 20;
   width: 100%;
   margin-bottom: 6px;
diff --git a/dashboard/src/views/extension/PluginDetailPage.vue b/dashboard/src/views/extension/PluginDetailPage.vue
index 10a15b33a1..6416f46c26 100644
--- a/dashboard/src/views/extension/PluginDetailPage.vue
+++ b/dashboard/src/views/extension/PluginDetailPage.vue
@@ -1053,7 +1053,7 @@ onBeforeUnmount(() => {
   margin-bottom: 28px;
   padding: 10px 0;
   position: sticky;
-  top: calc(var(--v-layout-top, 64px));
+  top: 0;
   z-index: 20;
 }
 

From 1e15dc5cda040015fb1bd4c52f67c69cd0ee5ce2 Mon Sep 17 00:00:00 2001
From: kawayiYokami <95584793+kawayiYokami@users.noreply.github.com>
Date: Sat, 30 May 2026 21:48:46 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix(dashboard):=20=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E4=BE=9B=E5=BA=94=E5=95=86=E6=A0=87=E7=AD=BE=E9=A1=B5=E7=AA=84?=
 =?UTF-8?q?=E5=B1=8F=E4=B8=8D=E8=B6=85=E5=87=BA=E5=B1=8F=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/provider/AddNewProvider.vue    | 26 ++++++++++++++-----
 dashboard/src/views/ProviderPage.vue          | 23 ++++++++++++++++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/components/provider/AddNewProvider.vue b/dashboard/src/components/provider/AddNewProvider.vue
index ac9f5e4412..d6b1d9f7ff 100644
--- a/dashboard/src/components/provider/AddNewProvider.vue
+++ b/dashboard/src/components/provider/AddNewProvider.vue
@@ -2,24 +2,24 @@
     <v-dialog v-model="showDialog" max-width="1000px" >
         <v-card :title="tm('dialogs.addProvider.title')">
             <v-card-text style="overflow-y: auto;">
-                <v-tabs v-model="activeProviderTab" grow>
-                    <v-tab value="agent_runner" class="font-weight-medium px-3">
+                <v-tabs v-model="activeProviderTab">
+                    <v-tab value="agent_runner" class="font-weight-medium">
                         <v-icon start>mdi-cogs</v-icon>
                         {{ tm('dialogs.addProvider.tabs.agentRunner') }}
                     </v-tab>
-                    <v-tab value="speech_to_text" class="font-weight-medium px-3">
+                    <v-tab value="speech_to_text" class="font-weight-medium">
                         <v-icon start>mdi-microphone-message</v-icon>
                         {{ tm('dialogs.addProvider.tabs.speechToText') }}
                     </v-tab>
-                    <v-tab value="text_to_speech" class="font-weight-medium px-3">
+                    <v-tab value="text_to_speech" class="font-weight-medium">
                         <v-icon start>mdi-volume-high</v-icon>
                         {{ tm('dialogs.addProvider.tabs.textToSpeech') }}
                     </v-tab>
-                    <v-tab value="embedding" class="font-weight-medium px-3">
+                    <v-tab value="embedding" class="font-weight-medium">
                         <v-icon start>mdi-code-json</v-icon>
                         {{ tm('dialogs.addProvider.tabs.embedding') }}
                     </v-tab>
-                    <v-tab value="rerank" class="font-weight-medium px-3">
+                    <v-tab value="rerank" class="font-weight-medium">
                         <v-icon start>mdi-compare-vertical</v-icon>
                         {{ tm('dialogs.addProvider.tabs.rerank') }}
                     </v-tab>
@@ -240,4 +240,18 @@ export default {
     font-weight: bold;
     opacity: 0.3;
 }
+
+@media (max-width: 960px) {
+    :deep(.v-tab) {
+        min-width: 48px !important;
+        padding: 0 10px !important;
+    }
+    :deep(.v-tab) .v-btn__content {
+        font-size: 0;
+    }
+    :deep(.v-tab) .v-btn__content .v-icon {
+        font-size: 20px;
+        margin-inline-end: 0;
+    }
+}
 </style>
diff --git a/dashboard/src/views/ProviderPage.vue b/dashboard/src/views/ProviderPage.vue
index 6cf583a108..e200ce0a4b 100644
--- a/dashboard/src/views/ProviderPage.vue
+++ b/dashboard/src/views/ProviderPage.vue
@@ -890,6 +890,29 @@ function goToConfigPage() {
     overflow-x: auto;
   }
 
+  .provider-page :deep(.v-tab) {
+    min-width: 0;
+    padding: 0 8px;
+  }
+
+  .provider-page :deep(.v-tab) .v-btn__content {
+    white-space: nowrap;
+  }
+
+  @media (max-width: 960px) {
+    .provider-page :deep(.v-tab) {
+      min-width: 48px !important;
+      padding: 0 10px !important;
+    }
+    .provider-page :deep(.v-tab) .v-btn__content {
+      font-size: 0;
+    }
+    .provider-page :deep(.v-tab) .v-btn__content .v-icon {
+      font-size: 20px;
+      margin-inline-end: 0;
+    }
+  }
+
   .provider-workbench {
     border-radius: 16px;
     overflow: visible;

From 2b3908b20825599778bccd2e834911fba6568ef0 Mon Sep 17 00:00:00 2001
From: kawayiYokami <95584793+kawayiYokami@users.noreply.github.com>
Date: Sat, 30 May 2026 21:59:55 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix(dashboard):=20=E4=BC=98=E5=8C=96chat?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=9A=84=E8=BE=93=E5=85=A5=E6=A1=86=E5=92=8C?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/components/chat/Chat.vue      | 134 +++++++++++---------
 dashboard/src/components/chat/ChatInput.vue |  46 +------
 dashboard/src/views/ConfigPage.vue          |   1 +
 3 files changed, 77 insertions(+), 104 deletions(-)

diff --git a/dashboard/src/components/chat/Chat.vue b/dashboard/src/components/chat/Chat.vue
index 3179e59f02..ba7a9fcd78 100644
--- a/dashboard/src/components/chat/Chat.vue
+++ b/dashboard/src/components/chat/Chat.vue
@@ -81,55 +81,57 @@
         />
       </div>
 
-      <div v-if="!isSidebarCollapsed" class="session-list">
-        <div
-          v-for="session in sessions"
-          :key="session.session_id"
-          class="session-item"
-          :class="{ active: !isProviderWorkspace && currSessionId === session.session_id }"
-          role="button"
-          tabindex="0"
-          @click="selectSession(session.session_id)"
-          @keydown.enter="selectSession(session.session_id)"
-          @keydown.space.prevent="selectSession(session.session_id)"
-        >
-          <span v-if="!isSidebarCollapsed" class="session-title">{{
-            sessionTitle(session)
-          }}</span>
-          <div class="session-actions" @click.stop>
-            <v-btn
-              icon="mdi-pencil-outline"
-              size="x-small"
-              variant="text"
-              class="session-action-btn"
-              :title="tm('conversation.editDisplayName')"
-              @click="editSidebarSessionTitle(session)"
-            />
-            <v-btn
-              icon="mdi-delete-outline"
-              size="x-small"
-              variant="text"
-              class="session-action-btn"
-              :title="tm('actions.deleteChat')"
-              @click="deleteSidebarSession(session)"
+      <OverlayScrollbar v-if="!isSidebarCollapsed" class="session-list-scroll">
+        <div class="session-list">
+          <div
+            v-for="session in sessions"
+            :key="session.session_id"
+            class="session-item"
+            :class="{ active: !isProviderWorkspace && currSessionId === session.session_id }"
+            role="button"
+            tabindex="0"
+            @click="selectSession(session.session_id)"
+            @keydown.enter="selectSession(session.session_id)"
+            @keydown.space.prevent="selectSession(session.session_id)"
+          >
+            <span v-if="!isSidebarCollapsed" class="session-title">{{
+              sessionTitle(session)
+            }}</span>
+            <div class="session-actions" @click.stop>
+              <v-btn
+                icon="mdi-pencil-outline"
+                size="x-small"
+                variant="text"
+                class="session-action-btn"
+                :title="tm('conversation.editDisplayName')"
+                @click="editSidebarSessionTitle(session)"
+              />
+              <v-btn
+                icon="mdi-delete-outline"
+                size="x-small"
+                variant="text"
+                class="session-action-btn"
+                :title="tm('actions.deleteChat')"
+                @click="deleteSidebarSession(session)"
+              />
+            </div>
+            <v-progress-circular
+              v-if="isSessionRunning(session.session_id)"
+              class="session-progress"
+              indeterminate
+              size="16"
+              width="2"
             />
           </div>
-          <v-progress-circular
-            v-if="isSessionRunning(session.session_id)"
-            class="session-progress"
-            indeterminate
-            size="16"
-            width="2"
-          />
-        </div>
 
-        <div
-          v-if="!isSidebarCollapsed && !sessions.length && !loadingSessions"
-          class="empty-sessions"
-        >
-          {{ tm("conversation.noHistory") }}
+          <div
+            v-if="!isSidebarCollapsed && !sessions.length && !loadingSessions"
+            class="empty-sessions"
+          >
+            {{ tm("conversation.noHistory") }}
+          </div>
         </div>
-      </div>
+      </OverlayScrollbar>
 
       <div class="sidebar-footer">
         <StyledMenu
@@ -337,14 +339,16 @@
       </ProjectView>
 
       <template v-else>
-        <section
-          ref="messagesContainer"
+        <OverlayScrollbar
+          ref="messagesScrollbar"
           class="messages-panel"
-          @scroll="handleMessagesScroll"
         >
-          <div v-if="loadingMessages" class="center-state">
-            <v-progress-circular indeterminate size="32" width="3" />
-          </div>
+          <section
+            class="messages-panel-inner"
+          >
+            <div v-if="loadingMessages" class="center-state">
+              <v-progress-circular indeterminate size="32" width="3" />
+            </div>
 
           <div v-else-if="sessionProject" class="session-project-breadcrumb">
             <span>{{ sessionProject.title }}</span>
@@ -387,6 +391,7 @@
             />
           </div>
         </section>
+        </OverlayScrollbar>
 
         <section class="composer-shell">
           <ChatInput
@@ -505,6 +510,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
 import axios from "axios";
 import StyledMenu from "@/components/shared/StyledMenu.vue";
+import OverlayScrollbar from "@/components/shared/OverlayScrollbar.vue";
 import ProjectDialog, {
   type ProjectFormData,
 } from "@/components/chat/ProjectDialog.vue";
@@ -607,6 +613,7 @@ const projectSessions = ref<Session[]>([]);
 const loadingSessions = ref(false);
 const draft = ref("");
 const messagesContainer = ref<HTMLElement | null>(null);
+const messagesScrollbar = ref<InstanceType<typeof OverlayScrollbar> | null>(null);
 const inputRef = ref<InstanceType<typeof ChatInput> | null>(null);
 const shouldStickToBottom = ref(true);
 const replyTarget = ref<ChatRecord | null>(null);
@@ -766,6 +773,13 @@ onMounted(async () => {
   } finally {
     loadingSessions.value = false;
   }
+  // Bind messagesContainer to OverlayScrollbar viewport
+  nextTick(() => {
+    if (messagesScrollbar.value?.viewport) {
+      messagesContainer.value = messagesScrollbar.value.viewport;
+      messagesContainer.value.addEventListener('scroll', handleMessagesScroll);
+    }
+  });
 });
 
 onBeforeUnmount(() => {
@@ -1496,9 +1510,12 @@ function toggleTheme() {
   transform: rotate(180deg);
 }
 
-.session-list {
+.session-list-scroll {
   flex: 1;
-  overflow-y: auto;
+  min-height: 0;
+}
+
+.session-list {
   padding: 4px 12px 12px;
   display: flex;
   flex-direction: column;
@@ -1640,7 +1657,9 @@ function toggleTheme() {
 .messages-panel {
   flex: 1;
   min-height: 0;
-  overflow-y: auto;
+}
+
+.messages-panel-inner {
   padding: 24px max(24px, calc((100% - 980px) / 2)) 18px;
 }
 
@@ -1773,13 +1792,8 @@ kbd {
 }
 
 @media (max-width: 760px) {
-  .messages-panel {
+  .messages-panel-inner {
     padding: 18px 14px;
   }
-
-  .composer-shell,
-  .project-composer-shell {
-    padding: 0;
-  }
 }
 </style>
diff --git a/dashboard/src/components/chat/ChatInput.vue b/dashboard/src/components/chat/ChatInput.vue
index 4fb59b22de..59d0010fbf 100644
--- a/dashboard/src/components/chat/ChatInput.vue
+++ b/dashboard/src/components/chat/ChatInput.vue
@@ -9,8 +9,8 @@
     <div
       class="input-container"
       :style="{
-        width: '85%',
-        maxWidth: '900px',
+        width: '100%',
+        maxWidth: '800px',
         margin: '0 auto',
         border: isDark ? 'none' : '1px solid #e0e0e0',
         borderRadius: '24px',
@@ -1253,46 +1253,4 @@ defineExpose({
   }
 }
 
-@media (max-width: 768px) {
-  .input-area {
-    padding: 0 !important;
-  }
-
-  .input-container {
-    width: 100% !important;
-    max-width: 100% !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  .input-outline-control {
-    width: 32px !important;
-    height: 32px !important;
-    min-width: 32px !important;
-  }
-
-  .input-area textarea,
-  .chat-textarea {
-    min-height: 28px !important;
-    max-height: 140px !important;
-    font-size: 16px !important;
-    line-height: 20px !important;
-    padding: 8px 14px 7px !important;
-  }
-
-  .attachments-preview {
-    margin: 8px 10px 0;
-    gap: 8px;
-  }
-
-  .attachment-card {
-    width: min(220px, calc(100vw - 28px));
-    height: 58px;
-  }
-
-  .image-preview {
-    width: 58px;
-    flex-basis: 58px;
-  }
-}
 </style>
diff --git a/dashboard/src/views/ConfigPage.vue b/dashboard/src/views/ConfigPage.vue
index ea8a3deb82..c560810ff8 100644
--- a/dashboard/src/views/ConfigPage.vue
+++ b/dashboard/src/views/ConfigPage.vue
@@ -987,6 +987,7 @@ export default {
   display: flex;
   flex-direction: column;
   margin: 16px;
+  overflow: hidden;
 }
 
 .test-chat-header {

From e4a7eade35e6c0b3d215accaa163caf2da8e95c7 Mon Sep 17 00:00:00 2001
From: kawayiYokami <95584793+kawayiYokami@users.noreply.github.com>
Date: Sat, 30 May 2026 22:08:06 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix(dashboard):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E6=A1=86=E5=8F=AF=E6=BB=9A=E5=8A=A8=EF=BC=8C?=
 =?UTF-8?q?=E8=BF=9B=E5=85=A5=E6=89=8D=E6=98=BE=E7=A4=BA=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../full/vertical-header/VerticalHeader.vue   | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
index c41b566e70..ce35aa7a61 100644
--- a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
+++ b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
@@ -1860,8 +1860,30 @@ onMounted(async () => {
 
 .release-message-preview {
   max-height: 220px;
-  overflow: hidden;
-  position: relative;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.release-message-preview::-webkit-scrollbar {
+  width: 0;
+}
+
+.release-message-preview:hover {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--v-theme-primary), 0.45) transparent;
+}
+
+.release-message-preview:hover::-webkit-scrollbar {
+  width: 6px;
+}
+
+.release-message-preview:hover::-webkit-scrollbar-thumb {
+  background: rgba(var(--v-theme-primary), 0.45);
+  border-radius: 3px;
+}
+
+.release-message-preview:hover::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 .release-message-preview::after {