Let the page scroll

Author: xPaw

src/components/DeclarationsPage.tsx

@@ -138,7 +138,7 @@ export default function DeclarationsPage({
 const ContentColumn = styled.div`
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  min-height: 0;
 `;
 
 const MobileSidebarOverlay = styled.div`
@@ -182,7 +182,7 @@ const SidebarPanel = styled.div`
 const PageGrid = styled.div`
   display: grid;
   grid-template-columns: 340px 1fr;
-  height: 100dvh;
+  min-height: 100dvh;
 
   @media (max-width: 768px) {
     grid-template-columns: 1fr;

src/components/Docs/SchemaClass.tsx

@@ -63,7 +63,6 @@ const FieldRow = styled.div`
   }
 `;
 
-
 const FieldOffset = styled.button`
   background: none;
   border: none;
@@ -410,8 +409,9 @@ function SchemaFieldView({
       </FieldRow>
       {bitfield && bitfield.totalBits > 0 && (
         <BitfieldPadding>
-          {Math.ceil(bitfield.totalBits / 8)} byte{Math.ceil(bitfield.totalBits / 8) !== 1 ? "s" : ""}{" "}
-          ({bitfield.totalBits} bit{bitfield.totalBits !== 1 ? "s" : ""}
+          {Math.ceil(bitfield.totalBits / 8)} byte
+          {Math.ceil(bitfield.totalBits / 8) !== 1 ? "s" : ""} ({bitfield.totalBits} bit
+          {bitfield.totalBits !== 1 ? "s" : ""}
           {bitfield.padding > 0 ? ` + ${bitfield.padding} padding` : ""})
         </BitfieldPadding>
       )}

src/components/Docs/SchemaEnum.tsx

@@ -60,7 +60,6 @@ const EnumMemberWrapper = styled.div`
   }
 `;
 
-
 const EnumMemberHex = styled.span`
   font-family: var(--font-mono);
   font-size: 14px;

src/components/Lists.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual";
 
 interface Props<T> {
   data: T[];
@@ -8,14 +8,22 @@ interface Props<T> {
 
 export function LazyList<T>({ data, render }: Props<T>) {
   const parentRef = useRef<HTMLDivElement>(null);
+  const parentOffsetRef = useRef(0);
 
-  const virtualizer = useVirtualizer({
+  const virtualizer = useWindowVirtualizer({
     count: data.length,
-    getScrollElement: () => parentRef.current?.parentElement ?? null,
     estimateSize: () => 80,
     overscan: 10,
+    scrollMargin: parentOffsetRef.current,
   });
 
+  // Capture offset once on mount
+  React.useLayoutEffect(() => {
+    if (parentRef.current) {
+      parentOffsetRef.current = parentRef.current.getBoundingClientRect().top + window.scrollY;
+    }
+  }, []);
+
   return (
     <div ref={parentRef}>
       <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
@@ -29,7 +37,7 @@ export function LazyList<T>({ data, render }: Props<T>) {
               top: 0,
               left: 0,
               width: "100%",
-              transform: `translateY(${virtualRow.start}px)`,
+              transform: `translateY(${virtualRow.start - parentOffsetRef.current}px)`,
             }}
           >
             {render(data[virtualRow.index])}

src/components/layout/Content.tsx

@@ -1,10 +1,8 @@
 import { styled } from "@linaria/react";
 
 export const ContentWrapper = styled.main`
-  flex: 1;
   padding: 0 24px 24px 24px;
   min-width: 0;
-  overflow-y: auto;
 
   @media (max-width: 768px) {
     grid-column: 1;

src/components/layout/NavBar.tsx

@@ -199,6 +199,9 @@ const NavBarContentCell = styled.div`
   padding: 10px 14px 10px 24px;
   min-width: 0;
   flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
   background-color: var(--background);
 
   @media (max-width: 768px) {

src/components/layout/Sidebar.tsx

@@ -116,4 +116,8 @@ export const SidebarWrapper = styled.div`
   min-width: 0;
   padding: 6px 8px 4px 10px;
   background-color: var(--sidebar);
+  position: sticky;
+  top: 0;
+  height: 100dvh;
+  align-self: start;
 `;

src/global.css

@@ -57,7 +57,6 @@ html,
 body,
 #root {
   width: 100%;
-  height: 100%;
   margin: 0;
   background-color: var(--background);
   scrollbar-gutter: stable;