fix(layout): improve layout responsiveness and overflow handling
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user