From b589d733ca2ab59f1f8e6a375d3e2faa28c84bdd Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Tue, 31 Mar 2026 19:13:47 +0800
Subject: [PATCH] fix(inbox): pin header and only scroll content in inbox list
 panel

The inbox left panel had the header inside the overflow-y-auto container,
causing it to scroll away with the list items. Changed to flex-col layout
with shrink-0 header and flex-1 overflow-y-auto content area.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/app/(dashboard)/inbox/page.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/(dashboard)/inbox/page.tsx b/apps/web/app/(dashboard)/inbox/page.tsx
index 1bd8ee89..65b3191b 100644
--- a/apps/web/app/(dashboard)/inbox/page.tsx
+++ b/apps/web/app/(dashboard)/inbox/page.tsx
@@ -309,11 +309,11 @@ export default function InboxPage() {
     return (
       <ResizablePanelGroup orientation="horizontal" className="flex-1 min-h-0" defaultLayout={defaultLayout} onLayoutChanged={onLayoutChanged}>
         <ResizablePanel id="list" defaultSize={320} minSize={240} maxSize={480} groupResizeBehavior="preserve-pixel-size">
-          <div className="overflow-y-auto border-r h-full">
-            <div className="flex h-12 items-center border-b px-4">
+          <div className="flex flex-col border-r h-full">
+            <div className="flex h-12 shrink-0 items-center border-b px-4">
               <Skeleton className="h-5 w-16" />
             </div>
-            <div className="space-y-1 p-2">
+            <div className="flex-1 min-h-0 overflow-y-auto space-y-1 p-2">
               {Array.from({ length: 5 }).map((_, i) => (
                 <div key={i} className="flex items-center gap-3 px-4 py-2.5">
                   <Skeleton className="h-7 w-7 shrink-0 rounded-full" />
@@ -341,8 +341,8 @@ export default function InboxPage() {
     <ResizablePanelGroup orientation="horizontal" className="flex-1 min-h-0" defaultLayout={defaultLayout} onLayoutChanged={onLayoutChanged}>
       <ResizablePanel id="list" defaultSize={320} minSize={240} maxSize={480} groupResizeBehavior="preserve-pixel-size">
       {/* Left column — inbox list */}
-      <div className="overflow-y-auto border-r h-full">
-        <div className="flex h-12 items-center justify-between border-b px-4">
+      <div className="flex flex-col border-r h-full">
+        <div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
           <div className="flex items-center gap-2">
             <h1 className="text-sm font-semibold">Inbox</h1>
             {unreadCount > 0 && (
@@ -385,6 +385,7 @@ export default function InboxPage() {
           </DropdownMenu>
         </div>
 
+        <div className="flex-1 min-h-0 overflow-y-auto">
         {items.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
             <Inbox className="mb-3 h-8 w-8 text-muted-foreground/50" />
@@ -403,6 +404,7 @@ export default function InboxPage() {
             ))}
           </div>
         )}
+        </div>
       </div>
       </ResizablePanel>
       <ResizableHandle />