ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

style(layout): fix header sticky

Browse Source 
style(layout): fix unnecessary scroll
This commit is contained in:
Nicolas Meienberger
2025-10-30 18:22:42 +01:00
parent cce2d356fe
commit bd168df352
3 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/app/app.css
View File

@@ -24,6 +24,11 @@ body {
}
}
.main-content {
scrollbar-width: thin;
scrollbar-gutter: stable;
}
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);

2
apps/client/app/components/grid-background.tsx
View File

@@ -11,7 +11,7 @@ export function GridBackground({ children, className, containerClassName }: Grid
return (
<div
className={cn(
"relative min-h-dvh w-full overflow-x-hidden",
"relative min-h-full w-full overflow-x-hidden",
"[background-size:20px_20px] sm:[background-size:40px_40px]",
"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",

16
apps/client/app/components/layout.tsx
View File

@@ -36,8 +36,8 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
return (
<SidebarProvider defaultOpen={true}>
<AppSidebar />
<div className="w-full relative">
<header className="sticky top-0 z-50 bg-card-header border-b border-border/50">
<div className="w-full relative flex flex-col h-screen overflow-hidden">
<header className="z-50 bg-card-header border-b border-border/50 flex-shrink-0">
<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container">
<div className="flex items-center gap-4">
<SidebarTrigger />
@@ -69,11 +69,13 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
)}
</div>
</header>
<GridBackground>
<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
<Outlet />
</main>
</GridBackground>
<div className="main-content flex-1 overflow-y-auto">
<GridBackground>
<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
<Outlet />
</main>
</GridBackground>
</div>
</div>
</SidebarProvider>
);