fix scroll restore

ethanniser · Nov 30, 2024 · 21a2a7e · 21a2a7e
1 parent c918c1c
commit 21a2a7e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
@@ -9,7 +9,7 @@ export default async function Layout({
   const allCollections = await getCollections();
   return (
     <div className="flex flex-grow font-mono">
-      <aside className="hidden w-64 min-w-64 max-w-64 border-r p-4 md:block">
+      <aside className="sticky hidden w-64 min-w-64 max-w-64 border-r p-4 md:block">
         <h2 className="border-b border-accent1 text-sm font-semibold text-accent1">
           Choose a Category
         </h2>
@@ -27,10 +27,7 @@ export default async function Layout({
           ))}
         </ul>
       </aside>
-      <main
-        className="h-[calc(100vh-113px)] overflow-y-auto p-4 pt-0"
-        id="main-content"
-      >
+      <main className="h-full overflow-y-auto p-4 pt-0" id="main-content">
         {children}
       </main>
     </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,9 +32,9 @@ export default async function RootLayout({
       <body
         className={`${GeistSans.variable} ${GeistMono.variable} flex flex-col antialiased`}
       >
-        <div>
-          <header className="z-10 flex flex-grow items-center justify-between gap-4 border-b-2 border-accent2 bg-background p-2 pb-[4px] pt-2 sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
-            <div className="flex flex-grow flex-col">
+        <div className="relative">
+          <header className="absolute left-0 top-0 z-10 flex min-w-[100vw] flex-grow items-center justify-between gap-4 border-b-2 border-accent2 bg-background p-2 pb-[4px] pt-2 sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
+            <div className="flex min-w-full flex-grow flex-col">
               <div className="absolute right-2 top-2 flex justify-end pt-2 font-sans text-sm hover:underline sm:relative sm:right-0 sm:top-0">
                 <Suspense
                   fallback={