Fix sticky positioning of version and storage info in admin sidebar
- Change AdminLayout to use h-screen instead of min-h-screen - Add overflow-hidden to prevent scrollbar on outer container - Update sidebar to use h-screen for proper height reference - Add flex-shrink-0 to header and bottom sections - Add min-h-0 to navigation to allow proper overflow - Add overflow-y-auto to main content area The version info and storage usage now properly stick to the bottom of the viewport instead of the bottom of the page content. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -30,7 +30,7 @@ export const AdminLayout: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-neutral-50 flex">
|
<div className="h-screen bg-neutral-50 flex overflow-hidden">
|
||||||
{/* Mobile sidebar backdrop */}
|
{/* Mobile sidebar backdrop */}
|
||||||
{sidebarOpen && (
|
{sidebarOpen && (
|
||||||
<div
|
<div
|
||||||
@@ -43,7 +43,7 @@ export const AdminLayout: React.FC = () => {
|
|||||||
<AdminSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
|
<AdminSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
|
||||||
|
|
||||||
{/* Main content */}
|
{/* Main content */}
|
||||||
<div className="flex-1 flex flex-col min-w-0">
|
<div className="flex-1 flex flex-col min-w-0 h-screen">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<AdminHeader onMenuClick={() => setSidebarOpen(true)} />
|
<AdminHeader onMenuClick={() => setSidebarOpen(true)} />
|
||||||
|
|
||||||
@@ -51,7 +51,7 @@ export const AdminLayout: React.FC = () => {
|
|||||||
<MaintenanceBanner />
|
<MaintenanceBanner />
|
||||||
|
|
||||||
{/* Page content */}
|
{/* Page content */}
|
||||||
<main id="main-content" className="flex-1 px-4 sm:px-6 lg:px-8 py-8">
|
<main id="main-content" className="flex-1 px-4 sm:px-6 lg:px-8 py-8 overflow-y-auto">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -45,13 +45,13 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-neutral-200 transform transition-transform duration-200 ease-in-out lg:relative lg:translate-x-0 ${
|
className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-neutral-200 transform transition-transform duration-200 ease-in-out lg:relative lg:translate-x-0 lg:h-screen ${
|
||||||
isOpen ? 'translate-x-0' : '-translate-x-full'
|
isOpen ? 'translate-x-0' : '-translate-x-full'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-screen lg:h-full">
|
||||||
{/* Logo/Brand */}
|
{/* Logo/Brand */}
|
||||||
<div className="flex items-center justify-between h-16 px-6 border-b border-neutral-200">
|
<div className="flex items-center justify-between h-16 px-6 border-b border-neutral-200 flex-shrink-0">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Camera className="w-8 h-8 text-primary-600" />
|
<Camera className="w-8 h-8 text-primary-600" />
|
||||||
<span className="ml-2 text-xl font-bold text-neutral-900">{t('admin.title')}</span>
|
<span className="ml-2 text-xl font-bold text-neutral-900">{t('admin.title')}</span>
|
||||||
@@ -65,7 +65,7 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation */}
|
{/* Navigation */}
|
||||||
<nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto">
|
<nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto min-h-0">
|
||||||
{navigation.map((item) => {
|
{navigation.map((item) => {
|
||||||
const isActive = location.pathname === item.href ||
|
const isActive = location.pathname === item.href ||
|
||||||
(item.href !== '/admin/dashboard' && location.pathname.startsWith(item.href));
|
(item.href !== '/admin/dashboard' && location.pathname.startsWith(item.href));
|
||||||
@@ -91,7 +91,7 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Bottom section - sticky to bottom */}
|
{/* Bottom section - sticky to bottom */}
|
||||||
<div className="mt-auto">
|
<div className="flex-shrink-0">
|
||||||
{/* Version Info */}
|
{/* Version Info */}
|
||||||
<VersionInfo />
|
<VersionInfo />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user