mirror of
https://github.com/freedbygrace/ActiveDirectoryManager.git
synced 2026-08-27 19:17:07 +00:00
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:
@@ -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>}
|
||||||
|
|||||||
Reference in New Issue
Block a user