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