refactor out ref sizing hack in sidebar

web/components/nav/sidebar.tsx

@@ -18,7 +18,7 @@ import { ManifoldLogo } from './manifold-logo'
 import { MenuButton } from './menu'
 import { ProfileSummary } from './profile-menu'
 import NotificationsIcon from 'web/components/notifications-icon'
-import React, { useState } from 'react'
+import React from 'react'
 import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { CreateQuestionButton } from 'web/components/create-question-button'
 import { useMemberGroups } from 'web/hooks/use-group'
@@ -26,7 +26,6 @@ import { groupPath } from 'web/lib/firebase/groups'
 import { trackCallback, withTracking } from 'web/lib/service/analytics'
 import { Group } from 'common/group'
 import { Spacer } from '../layout/spacer'
-import { useWindowSize } from 'web/hooks/use-window-size'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import { buildArray } from 'common/util/array'
 
@@ -242,7 +241,10 @@ export default function Sidebar(props: { className?: string }) {
   }))
 
   return (
-    <nav aria-label="Sidebar" className={className}>
+    <nav
+      aria-label="Sidebar"
+      className={clsx('flex max-h-[100vh] flex-col', className)}
+    >
       <ManifoldLogo className="py-6" twoLine />
 
       <CreateQuestionButton user={user} />
@@ -254,7 +256,7 @@ export default function Sidebar(props: { className?: string }) {
       )}
 
       {/* Mobile navigation */}
-      <div className="space-y-1 lg:hidden">
+      <div className="flex min-h-0 shrink flex-col gap-1 lg:hidden">
         {mobileNavigationOptions.map((item) => (
           <SidebarItem key={item.href} item={item} currentPage={currentPage} />
         ))}
@@ -273,7 +275,7 @@ export default function Sidebar(props: { className?: string }) {
       </div>
 
       {/* Desktop navigation */}
-      <div className="hidden space-y-1 lg:block">
+      <div className="hidden min-h-0 shrink flex-col gap-1 lg:flex">
         {navigationOptions.map((item) => (
           <SidebarItem key={item.href} item={item} currentPage={currentPage} />
         ))}
@@ -293,10 +295,6 @@ export default function Sidebar(props: { className?: string }) {
 function GroupsList(props: { currentPage: string; memberItems: Item[] }) {
   const { currentPage, memberItems } = props
 
-  const { height } = useWindowSize()
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
-  const remainingHeight = (height ?? 0) - (containerRef?.offsetTop ?? 0)
-
   // const preferredNotifications = useUnseenPreferredNotifications(
   //   privateUser,
   //   {
@@ -322,11 +320,7 @@ function GroupsList(props: { currentPage: string; memberItems: Item[] }) {
         currentPage={currentPage}
       />
 
-      <div
+      <div className="min-h-0 shrink space-y-0.5 overflow-auto">
-        className="flex-1 space-y-0.5 overflow-auto"
-        style={{ height: remainingHeight }}
-        ref={setContainerRef}
-      >
         {memberItems.map((item) => (
           <a
             href={item.href}

web/components/page.tsx

@@ -23,7 +23,7 @@ export function Page(props: {
         )}
       >
         <Toaster />
-        <Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" />
+        <Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:flex" />
         <main
           className={clsx(
             'lg:col-span-8 lg:pt-6',