fix(layout): improve layout responsiveness and overflow handling

This commit is contained in:
mlogclub
2026-04-29 10:40:09 +08:00
parent 944221a76c
commit b04f14b8cf
3 changed files with 24 additions and 21 deletions
@@ -263,7 +263,7 @@ export function ScheduleCalendar({
} }
return ( 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"> <div className="grid grid-cols-7 border-b bg-muted/40">
{weekDayNames.map((name) => ( {weekDayNames.map((name) => (
<div key={name} className="flex h-10 items-center justify-center border-l first:border-l-0 text-sm font-medium"> <div key={name} className="flex h-10 items-center justify-center border-l first:border-l-0 text-sm font-medium">
+19 -17
View File
@@ -296,8 +296,8 @@ export default function DashboardAgentTeamSchedulesPage() {
return ( return (
<> <>
<div className="flex flex-1 flex-col gap-6 p-4 lg:p-6"> <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="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between"> <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"> <div className="flex flex-wrap items-center gap-2">
<ButtonGroup> <ButtonGroup>
<Button <Button
@@ -369,22 +369,24 @@ export default function DashboardAgentTeamSchedulesPage() {
</div> </div>
{viewMode === "calendar" ? ( {viewMode === "calendar" ? (
<ScheduleCalendar <div className="min-h-0 flex-1 overflow-auto">
monthStart={monthStart} <ScheduleCalendar
calendarStart={startOfMonthCalendar(monthStart)} monthStart={monthStart}
calendarEnd={endOfMonthCalendar(monthStart)} calendarStart={startOfMonthCalendar(monthStart)}
teams={visibleTeams} calendarEnd={endOfMonthCalendar(monthStart)}
schedules={calendarItems} teams={visibleTeams}
loading={calendarLoading} schedules={calendarItems}
savingId={actionLoadingId} loading={calendarLoading}
onCreate={openCreateDialog} savingId={actionLoadingId}
onEdit={openEditDialog} onCreate={openCreateDialog}
onMove={handleCalendarUpdate} onEdit={openEditDialog}
onResize={handleCalendarUpdate} onMove={handleCalendarUpdate}
/> onResize={handleCalendarUpdate}
/>
</div>
) : ( ) : (
<div className="space-y-4"> <div className="min-h-0 flex-1 space-y-4 overflow-auto">
<div className="overflow-hidden rounded-lg border bg-background"> <div className="min-w-[720px] overflow-hidden rounded-lg border bg-background">
<Table> <Table>
<TableHeader className="bg-muted/40"> <TableHeader className="bg-muted/40">
<TableRow> <TableRow>
+4 -3
View File
@@ -51,6 +51,7 @@ export default function DashboardLayout({
return ( return (
<SidebarProvider <SidebarProvider
className="h-svh min-h-0 overflow-hidden"
style={ style={
{ {
"--sidebar-width": "calc(var(--spacing) * 54)", "--sidebar-width": "calc(var(--spacing) * 54)",
@@ -60,10 +61,10 @@ export default function DashboardLayout({
> >
<NotificationProvider> <NotificationProvider>
<AppSidebar variant="inset" /> <AppSidebar variant="inset" />
<SidebarInset> <SidebarInset className="min-h-0 overflow-hidden">
<SiteHeader /> <SiteHeader />
<div className="flex flex-1 flex-col"> <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
<div className="@container/main flex flex-1 flex-col gap-2"> <div className="@container/main flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
{children} {children}
</div> </div>
</div> </div>