From f09ab119a46722c744f05fdb6eac8860feb86206 Mon Sep 17 00:00:00 2001
From: Acbox <acbox0328@gmail.com>
Date: Sun, 29 Mar 2026 01:04:17 +0800
Subject: [PATCH] fix(web): pin chat input and make session list scrollable
 independently

Constrain the main layout to viewport height (h-dvh) and override
SidebarProvider's min-h-svh so the height chain propagates correctly.
Change main-container overflow from auto to hidden so the outer
container never scrolls. Use absolute-positioning pattern for
session sidebar ScrollArea (matching chat messages pattern) to
ensure sessions scroll independently while the chat input stays fixed.
---
 .../src/components/main-container/index.vue   |  2 +-
 apps/web/src/layout/main-layout/index.vue     |  3 +-
 .../pages/home/components/session-sidebar.vue | 54 ++++++++++---------
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/components/main-container/index.vue b/apps/web/src/components/main-container/index.vue
index 3330747d..8a95d9c3 100644
--- a/apps/web/src/components/main-container/index.vue
+++ b/apps/web/src/components/main-container/index.vue
@@ -1,6 +1,6 @@
 <template>
   <SidebarInset class="flex flex-col overflow-hidden">
-    <section class="flex-1 overflow-y-auto">
+    <section class="flex-1 min-h-0 overflow-hidden">
       <router-view v-slot="{ Component }">
         <KeepAlive>
           <component :is="Component" />
diff --git a/apps/web/src/layout/main-layout/index.vue b/apps/web/src/layout/main-layout/index.vue
index bef39eea..88decc53 100644
--- a/apps/web/src/layout/main-layout/index.vue
+++ b/apps/web/src/layout/main-layout/index.vue
@@ -1,6 +1,7 @@
 <template>
-  <section class="flex">
+  <section class="flex h-dvh overflow-hidden">
     <sidebar-provider
+      class="min-h-0 h-full"
       :default-open="sidebarDefaultOpen"
     >
       <section class="relative">
diff --git a/apps/web/src/pages/home/components/session-sidebar.vue b/apps/web/src/pages/home/components/session-sidebar.vue
index 99cd227d..042402b9 100644
--- a/apps/web/src/pages/home/components/session-sidebar.vue
+++ b/apps/web/src/pages/home/components/session-sidebar.vue
@@ -100,34 +100,38 @@
       </DropdownMenu>
     </div>
 
-    <ScrollArea class="flex-1">
-      <div class="flex flex-col gap-1 px-1.5 overflow-hidden">
-        <SessionItem
-          v-for="session in filteredSessions"
-          :key="session.id"
-          :session="session"
-          :is-active="sessionId === session.id"
-          @select="handleSelect"
-        />
-      </div>
+    <div class="flex-1 relative min-h-0">
+      <div class="absolute inset-0">
+        <ScrollArea class="h-full">
+          <div class="flex flex-col gap-1 px-1.5">
+            <SessionItem
+              v-for="session in filteredSessions"
+              :key="session.id"
+              :session="session"
+              :is-active="sessionId === session.id"
+              @select="handleSelect"
+            />
+          </div>
 
-      <div
-        v-if="currentBotId && !loadingChats && filteredSessions.length === 0"
-        class="px-3 py-6 text-center text-xs text-muted-foreground"
-      >
-        {{ t('chat.noSessions') }}
-      </div>
+          <div
+            v-if="currentBotId && !loadingChats && filteredSessions.length === 0"
+            class="px-3 py-6 text-center text-xs text-muted-foreground"
+          >
+            {{ t('chat.noSessions') }}
+          </div>
 
-      <div
-        v-if="loadingChats"
-        class="flex justify-center py-4"
-      >
-        <FontAwesomeIcon
-          :icon="['fas', 'spinner']"
-          class="size-4 animate-spin text-muted-foreground"
-        />
+          <div
+            v-if="loadingChats"
+            class="flex justify-center py-4"
+          >
+            <FontAwesomeIcon
+              :icon="['fas', 'spinner']"
+              class="size-4 animate-spin text-muted-foreground"
+            />
+          </div>
+        </ScrollArea>
       </div>
-    </ScrollArea>
+    </div>
   </div>
 </template>