fix: actually better scrolling

Author: duanwilliam

website/src/components/Navbar/styles.module.scss

@@ -5,7 +5,7 @@ $logo-size: 60px;
 
 .navbar {
   z-index: 10;
-  position: fixed;
+  position: sticky;
   top: 0;
   width: 100%;
   height: $navbar-height;

website/src/layout/components/ContentContainer/styles.module.scss

@@ -1,17 +1,19 @@
 @use "@/styles/mixins";
 @use "@/components/Navbar/styles.module" as navbar;
 @use "@/components/Sidebar/styles.module" as sidebar;
+@use "@/components/Toc/styles.module" as toc;
 
 $navbar-height: navbar.$navbar-height;
 $sidebar-width: sidebar.$desktop-sidebar-width;
+$toc-width: toc.$desktop-toc-width;
 
 .contentContainer {
-  padding: 2rem;
-  margin: $navbar-height auto 0;
-  width: 100%;
-  max-width: 1200px - $sidebar-width; // TODO: pick less arbitrary value
+  padding: 1rem;
+  margin: 0 auto;
+  width: calc(100% - #{$toc-width});
+  max-width: 1024px; // TODO: pick less arbitrary value
 
   @include mixins.desktop() {
-    padding: 1rem;
+    padding: 1rem 2rem;
   }
 }

website/src/layout/components/ContentContainer/styles.module.scss.d.ts

@@ -1,5 +1,4 @@
 // AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
-
 declare namespace StylesModuleScssNamespace {
   export interface IStylesModuleScss {
     active: string;
@@ -8,11 +7,13 @@ declare namespace StylesModuleScssNamespace {
     collapsed: string;
     contentContainer: string;
     desktop: string;
+    heading: string;
     hidden: string;
     items: string;
     left: string;
     link: string;
     logo: string;
+    nav: string;
     navItem: string;
     navbar: string;
     right: string;

website/src/layout/components/ContentWrapper/styles.module.scss

@@ -1,12 +1,14 @@
 @use "@/styles/mixins";
 @use "@/components/Sidebar/styles.module" as sidebar;
+@use "@/components/Toc/styles.module" as toc;
 
 $sidebar-width: sidebar.$desktop-sidebar-width;
+$toc-width: toc.$desktop-toc-width;
 
 .contentWrapper {
   width: 100%;
   display: flex;
-  
+
   @include mixins.desktop() {
     flex-grow: 1;
     max-width: calc(100% - #{$sidebar-width});

website/src/layout/components/ContentWrapper/styles.module.scss.d.ts

@@ -1,5 +1,4 @@
 // AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
-
 declare namespace StylesModuleScssNamespace {
   export interface IStylesModuleScss {
     active: string;
@@ -8,8 +7,10 @@ declare namespace StylesModuleScssNamespace {
     collapsed: string;
     contentWrapper: string;
     desktop: string;
+    heading: string;
     items: string;
     link: string;
+    nav: string;
   }
 }
 

website/src/layout/components/SidebarContainer/styles.module.scss

@@ -6,25 +6,22 @@ $navbar-height: navbar.$navbar-height;
 $sidebar-width: sidebar.$desktop-sidebar-width;
 
 .column {
-  position: sticky;
-  top: 0;
-  padding-top: $navbar-height;
-  
-  width: $sidebar-width;
-  height: 100%;
-  max-height: 100vh;
-  
-  display: flex;
-  flex-direction: column;
+  @include mixins.desktop-only(block) {
+    width: $sidebar-width;
+    border-right: 1px solid #dddddd; // TODO: unify colors
+    clip-path: inset(0);
+  }
 
   .container {
     @include mixins.desktop-only(flex) {
-      flex-grow: 1;
-      border-right: 1px solid #dddddd; // TODO: unify colors
-      clip-path: inset(0);
+      position: sticky;
+      top: $navbar-height;
+      width: 100%;
+      height: 100%;
+      max-height: calc(100vh - #{$navbar-height});
       flex-direction: column;
-  
-      overflow-x: hidden;
+
+      overflow: hidden auto;
       @include mixins.scrollbar(4px);
     }
   } 

website/src/layout/components/TocContainer/index.tsx

@@ -1,4 +1,4 @@
-import { tocContainer } from "./styles.module.scss";
+import { column, tocContainer } from "./styles.module.scss";
 
 import type { ReactNode } from "react";
 
@@ -8,8 +8,8 @@ interface TocContainerProps {
 
 export default function TocContainer ({ children }: TocContainerProps) {
   return (
-    <aside className={tocContainer}>
-      {children}
+    <aside className={column}>
+      <div className={tocContainer}>{children}</div>
     </aside>
   )
 }

website/src/layout/components/TocContainer/styles.module.scss

@@ -5,25 +5,27 @@
 $navbar-height: navbar.$navbar-height;
 $toc-width: toc.$desktop-toc-width;
 
+.column {
+  width: 100%;
+  flex: 0 0 #{$toc-width};
+  max-width: $toc-width;
+}
+
 .tocContainer {
   @include mixins.desktop-only(flex) {
     $top: 1rem;
     $margin-bottom: 1rem;
 
-    flex: 0 0 #{$toc-width};
-    
     position: sticky;
     top: calc(#{$navbar-height} + #{$top});
-    
     max-height: calc(100vh - #{$navbar-height} - #{$top} - #{$margin-bottom});
 
-    margin-left: auto;
-    margin-bottom: $margin-bottom;
+    margin: $top 1rem $margin-bottom auto;
     border-left: 1px solid #dddddd;
 
     flex-direction: column;
 
-    overflow-y: scroll;
+    overflow-y: auto;
     @include mixins.scrollbar(4px);
   }
 

website/src/layout/components/TocContainer/styles.module.scss.d.ts

@@ -1,8 +1,8 @@
 // AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
-
 declare namespace StylesModuleScssNamespace {
   export interface IStylesModuleScss {
     active: string;
+    column: string;
     heading: string;
     hidden: string;
     items: string;

website/src/layout/pages/DocPage/index.tsx

@@ -32,9 +32,9 @@ export default function DocPage ({ breadcrumb, sidebar, code  }: DocPageProps) {
         <SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
         <ContentWrapper>
           <ContentContainer>
-          <MarkdownWrapper>
-            <MDXContent />
-          </MarkdownWrapper>
+            <MarkdownWrapper>
+              <MDXContent />
+            </MarkdownWrapper>
           </ContentContainer>
           <TocContainer>
             <TocDesktop toc={toc} className={tocClassName} />