Refine sidebar height calculation

src/cmdk/CommandKClient.tsx

@@ -79,7 +79,7 @@ import IconFocalLength from '../components/icons/IconFocalLength';
 import IconFilm from '../components/icons/IconFilm';
 import IconLock from '../components/icons/IconLock';
 import IconYear from '../components/icons/IconYear';
-import useVisualViewportHeight from '@/utility/useVisualViewport';
+import useViewportHeight from '@/utility/useViewportHeight';
 import useMaskedScroll from '../components/useMaskedScroll';
 import { labelForFilm } from '@/film';
 import IconFavs from '@/components/icons/IconFavs';
@@ -177,7 +177,7 @@ export default function CommandKClient({
   const isOpenRef = useRef(isOpen);
 
   const refInput = useRef<HTMLInputElement>(null);
-  const mobileViewportHeight = useVisualViewportHeight();
+  const mobileViewportHeight = useViewportHeight();
   const maxHeight = useMemo(() => {
     const positionY = refInput.current?.getBoundingClientRect().y;
     return mobileViewportHeight && positionY

src/photo/PhotoGridPageClient.tsx

@@ -4,13 +4,13 @@ import { Photo } from '.';
 import { PATH_GRID_INFERRED } from '@/app/path';
 import PhotoGridSidebar from './PhotoGridSidebar';
 import PhotoGridContainer from './PhotoGridContainer';
-import { ComponentProps, useEffect, useRef } from 'react';
+import { ComponentProps, useEffect, useMemo, useRef } from 'react';
 import { useAppState } from '@/app/AppState';
 import clsx from 'clsx/lite';
-import useElementHeight from '@/utility/useElementHeight';
 import MaskedScroll from '@/components/MaskedScroll';
 import { IS_RECENTS_FIRST } from '@/app/config';
 import { SortBy } from './sort';
+import useViewportHeight from '@/utility/useViewportHeight';
 
 export default function PhotoGridPageClient({
   photos,
@@ -35,7 +35,10 @@ export default function PhotoGridPageClient({
     [setSelectedPhotoIds],
   );
 
-  const containerHeight = useElementHeight(ref);
+  const viewPortHeight = useViewportHeight();
+  const containerHeight = useMemo(() =>
+    viewPortHeight - (ref.current?.getBoundingClientRect().y ?? 0),
+  [viewPortHeight]);
 
   return (
     <PhotoGridContainer

src/photo/PhotoGridSidebar.tsx

@@ -41,8 +41,8 @@ import PhotoYear from '@/years/PhotoYear';
 import { chunkArray } from '@/utility/array';
 import PhotoRecents from '@/recents/PhotoRecents';
 
-const APPROXIMATE_ITEM_HEIGHT = 36;
-const ABOUT_HEIGHT_OFFSET = 80;
+const APPROXIMATE_ITEM_HEIGHT = 40;
+const ABOUT_HEIGHT_OFFSET = 24;
 
 export default function PhotoGridSidebar({
   photosCount,

src/utility/useViewportHeight.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+
+export default function useViewportHeight(
+  shouldDebounce = true,
+) {
+  const [viewportHeight, setViewportHeight] = useState<number>(0);
+
+  const setViewportHeightDebounced =
+    useDebouncedCallback(setViewportHeight, 100);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (shouldDebounce) {
+        setViewportHeightDebounced(window.visualViewport?.height ?? 0);
+      } else {
+        setViewportHeight(window.visualViewport?.height ?? 0);
+      }
+    };
+    handleResize();
+    window.visualViewport?.addEventListener('resize', handleResize);
+    return () =>
+      window.visualViewport?.removeEventListener('resize', handleResize);
+  }, [shouldDebounce, setViewportHeightDebounced]);
+
+  return viewportHeight;
+}

src/utility/useVisualViewport.ts

@@ -1,16 +0,0 @@
-import { useState, useEffect } from 'react';
-
-export default function useVisualViewportHeight() {
-  const [viewportHeight, setViewportHeight] = useState<number>();
-
-  useEffect(() => {
-    const handleResize = () => {
-      setViewportHeight(window.visualViewport?.height);
-    };
-    window.visualViewport?.addEventListener('resize', handleResize);
-    return () =>
-      window.visualViewport?.removeEventListener('resize', handleResize);
-  }, []);
-
-  return viewportHeight;
-}