From b04f14b8cf9b5624500c0f49d219dbbd10d77d4b Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Wed, 29 Apr 2026 10:40:09 +0800
Subject: [PATCH] fix(layout): improve layout responsiveness and overflow
 handling

---
 .../_components/calendar.tsx                  |  2 +-
 .../dashboard/agent-team-schedules/page.tsx   | 36 ++++++++++---------
 web/app/dashboard/layout.tsx                  |  7 ++--
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/web/app/dashboard/agent-team-schedules/_components/calendar.tsx b/web/app/dashboard/agent-team-schedules/_components/calendar.tsx
index d218ee2..9fa8e44 100644
--- a/web/app/dashboard/agent-team-schedules/_components/calendar.tsx
+++ b/web/app/dashboard/agent-team-schedules/_components/calendar.tsx
@@ -263,7 +263,7 @@ export function ScheduleCalendar({
   }
 
   return (
-    <div className="overflow-hidden rounded-lg border bg-background">
+    <div className="min-w-[960px] overflow-hidden rounded-lg border bg-background">
       <div className="grid grid-cols-7 border-b bg-muted/40">
         {weekDayNames.map((name) => (
           <div key={name} className="flex h-10 items-center justify-center border-l first:border-l-0 text-sm font-medium">
diff --git a/web/app/dashboard/agent-team-schedules/page.tsx b/web/app/dashboard/agent-team-schedules/page.tsx
index ffb2c20..524c323 100644
--- a/web/app/dashboard/agent-team-schedules/page.tsx
+++ b/web/app/dashboard/agent-team-schedules/page.tsx
@@ -296,8 +296,8 @@ export default function DashboardAgentTeamSchedulesPage() {
 
   return (
     <>
-      <div className="flex flex-1 flex-col gap-6 p-4 lg:p-6">
-        <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+      <div className="flex h-[calc(100vh-var(--header-height))] min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4 lg:p-6">
+        <div className="shrink-0 flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
           <div className="flex flex-wrap items-center gap-2">
             <ButtonGroup>
               <Button
@@ -369,22 +369,24 @@ export default function DashboardAgentTeamSchedulesPage() {
         </div>
 
         {viewMode === "calendar" ? (
-          <ScheduleCalendar
-            monthStart={monthStart}
-            calendarStart={startOfMonthCalendar(monthStart)}
-            calendarEnd={endOfMonthCalendar(monthStart)}
-            teams={visibleTeams}
-            schedules={calendarItems}
-            loading={calendarLoading}
-            savingId={actionLoadingId}
-            onCreate={openCreateDialog}
-            onEdit={openEditDialog}
-            onMove={handleCalendarUpdate}
-            onResize={handleCalendarUpdate}
-          />
+          <div className="min-h-0 flex-1 overflow-auto">
+            <ScheduleCalendar
+              monthStart={monthStart}
+              calendarStart={startOfMonthCalendar(monthStart)}
+              calendarEnd={endOfMonthCalendar(monthStart)}
+              teams={visibleTeams}
+              schedules={calendarItems}
+              loading={calendarLoading}
+              savingId={actionLoadingId}
+              onCreate={openCreateDialog}
+              onEdit={openEditDialog}
+              onMove={handleCalendarUpdate}
+              onResize={handleCalendarUpdate}
+            />
+          </div>
         ) : (
-          <div className="space-y-4">
-            <div className="overflow-hidden rounded-lg border bg-background">
+          <div className="min-h-0 flex-1 space-y-4 overflow-auto">
+            <div className="min-w-[720px] overflow-hidden rounded-lg border bg-background">
               <Table>
                 <TableHeader className="bg-muted/40">
                   <TableRow>
diff --git a/web/app/dashboard/layout.tsx b/web/app/dashboard/layout.tsx
index 5825fba..45f0cac 100644
--- a/web/app/dashboard/layout.tsx
+++ b/web/app/dashboard/layout.tsx
@@ -51,6 +51,7 @@ export default function DashboardLayout({
 
   return (
     <SidebarProvider
+      className="h-svh min-h-0 overflow-hidden"
       style={
         {
           "--sidebar-width": "calc(var(--spacing) * 54)",
@@ -60,10 +61,10 @@ export default function DashboardLayout({
     >
       <NotificationProvider>
         <AppSidebar variant="inset" />
-        <SidebarInset>
+        <SidebarInset className="min-h-0 overflow-hidden">
           <SiteHeader />
-          <div className="flex flex-1 flex-col">
-            <div className="@container/main flex flex-1 flex-col gap-2">
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div className="@container/main flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
               {children}
             </div>
           </div>