Improve dashboard layout responsiveness by adding scrollbars and ensuring all windows resize with the screen.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/70170f9d-ca2b-48fb-b9f6-78722283782a.jpg
This commit is contained in:
alphaeusmote
2025-04-11 04:26:25 +00:00
parent c475fad18e
commit bf2382f621
+7 -7
View File
@@ -124,10 +124,10 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
}; };
return ( return (
<div className="flex h-screen overflow-hidden bg-background"> <div className="flex h-screen max-h-screen overflow-hidden bg-background">
{/* Sidebar */} {/* Sidebar */}
<div <div
className={`w-64 h-full dark:bg-sidebar bg-white shadow-md z-10 flex-shrink-0 transition-all duration-300 ease-in-out ${ className={`w-64 h-full max-h-screen dark:bg-sidebar bg-white shadow-md z-10 flex-shrink-0 transition-all duration-300 ease-in-out ${
sidebarOpen ? "" : "-ml-64" sidebarOpen ? "" : "-ml-64"
} ${isMobile ? "absolute" : "relative"}`} } ${isMobile ? "absolute" : "relative"}`}
> >
@@ -137,7 +137,7 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
</Link> </Link>
</div> </div>
<div className="overflow-y-auto h-[calc(100%-64px)]"> <div className="overflow-y-auto h-[calc(100%-64px)] scrollbar-thin">
<div className="px-2 pt-4"> <div className="px-2 pt-4">
<Link <Link
href="/" href="/"
@@ -174,9 +174,9 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
</div> </div>
{/* Main Content */} {/* Main Content */}
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col min-h-screen max-h-screen overflow-hidden">
{/* Top App Bar */} {/* Top App Bar */}
<header className="h-16 bg-white dark:bg-sidebar shadow-sm flex items-center justify-between px-4 z-10"> <header className="h-16 bg-white dark:bg-sidebar shadow-sm flex items-center justify-between px-4 z-10 flex-shrink-0">
<div className="flex items-center"> <div className="flex items-center">
<Button <Button
variant="ghost" variant="ghost"
@@ -222,7 +222,7 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
<ChevronDown className="h-4 w-4 text-muted-foreground" /> <ChevronDown className="h-4 w-4 text-muted-foreground" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end" className="max-h-[70vh] overflow-y-auto">
<DropdownMenuLabel>My Account</DropdownMenuLabel> <DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
@@ -244,7 +244,7 @@ export function DashboardLayout({ children, title, description }: DashboardLayou
</header> </header>
{/* Main Content Area */} {/* Main Content Area */}
<main className="flex-1 overflow-y-auto p-6 bg-background"> <main className="flex-1 overflow-y-auto p-6 bg-background min-h-0">
<div className="mb-6"> <div className="mb-6">
<h1 className="text-2xl font-medium text-gray-800 dark:text-gray-100">{title}</h1> <h1 className="text-2xl font-medium text-gray-800 dark:text-gray-100">{title}</h1>
{description && <p className="text-gray-600 dark:text-gray-400">{description}</p>} {description && <p className="text-gray-600 dark:text-gray-400">{description}</p>}