Fix sidebar on mobile

Author: xPaw

src/components/DeclarationsPage.tsx

@@ -50,7 +50,7 @@ export default function DeclarationsPage({ context }: { context: DeclarationsCon
           <PageGrid>
             <MobileSidebarOverlay data-open={sidebarOpen || undefined} onClick={closeSidebar} />
             <SidebarPanel data-open={sidebarOpen || undefined}>
-              <DeclarationsSidebar onNavigate={closeSidebar} />
+              <DeclarationsSidebar onNavigate={closeSidebar} sidebarOpen={sidebarOpen} />
             </SidebarPanel>
             <ContentColumn>
               <NavBar onMenuClick={openSidebar} />
@@ -104,11 +104,6 @@ const SidebarPanel = styled.div`
     &[data-open] {
       display: flex;
     }
-
-    > * {
-      flex: 1;
-      min-height: 0;
-    }
   }
 `;
 

src/components/DeclarationsSidebar.tsx

@@ -47,7 +47,13 @@ const ROW_HEIGHT = 28;
 const STATIC_BEFORE = 19;
 const STATIC_AFTER = 60;
 
-export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void }) => {
+export const DeclarationsSidebar = ({
+  onNavigate,
+  sidebarOpen,
+}: {
+  onNavigate?: () => void;
+  sidebarOpen?: boolean;
+}) => {
   const { declarations, game } = useContext(DeclarationsContext);
   const { filter, setFilter } = useContext(SidebarFilterContext);
   const { module: activeModule = "", scope = "" } = useParams();
@@ -191,6 +197,21 @@ export const DeclarationsSidebar = ({ onNavigate }: { onNavigate?: () => void })
     }
   }, [activeModule, scope, activeIndex, virtualizer]);
 
+  // When the mobile sidebar opens, the virtualizer's scroll element transitions
+  // from display:none to display:flex. The element had zero dimensions while hidden,
+  // so the virtualizer rendered no items and scrollTop was lost. Re-measure and
+  // scroll to the active item.
+  useEffect(() => {
+    if (!sidebarOpen || !parentRef.current) return;
+    const raf = requestAnimationFrame(() => {
+      virtualizer.measure();
+      if (activeIndex >= 0) {
+        virtualizer.scrollToIndex(activeIndex, { align: "center" });
+      }
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [sidebarOpen]);
+
   const handleSidebarNavigate = useCallback(() => {
     navigatedFromSidebarRef.current = true;
     onNavigate?.();
@@ -312,6 +333,7 @@ const SidebarSearchInput = styled(SearchInput)`
 const SidebarList = styled.div`
   flex: 1;
   overflow: auto;
+  overscroll-behavior: contain;
 `;
 
 const SidebarUl = styled.ul`

src/components/layout/Sidebar.tsx

@@ -92,6 +92,9 @@ export const SidebarGroupHeader = styled.button`
   display: flex;
   align-items: center;
   gap: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   transition: color 0.1s;
 
   &:hover {
@@ -123,4 +126,10 @@ export const SidebarWrapper = styled.nav`
   top: 0;
   height: 100dvh;
   align-self: start;
+
+  @media (max-width: 768px) {
+    margin-right: 0;
+    flex: 1;
+    min-height: 0;
+  }
 `;