From ea1e232232c90765c4b54111c25196c9900cb954 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 16 Jul 2025 23:08:16 -0500
Subject: [PATCH] Refine sidebar height calculation

---
 src/cmdk/CommandKClient.tsx       |  4 ++--
 src/photo/PhotoGridPageClient.tsx |  9 ++++++---
 src/photo/PhotoGridSidebar.tsx    |  4 ++--
 src/utility/useViewportHeight.ts  | 27 +++++++++++++++++++++++++++
 src/utility/useVisualViewport.ts  | 16 ----------------
 5 files changed, 37 insertions(+), 23 deletions(-)
 create mode 100644 src/utility/useViewportHeight.ts
 delete mode 100644 src/utility/useVisualViewport.ts

diff --git a/src/cmdk/CommandKClient.tsx b/src/cmdk/CommandKClient.tsx
index 3d608dcd..4a3a6ea7 100644
--- a/src/cmdk/CommandKClient.tsx
+++ b/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
diff --git a/src/photo/PhotoGridPageClient.tsx b/src/photo/PhotoGridPageClient.tsx
index 01c58f32..8b87aa24 100644
--- a/src/photo/PhotoGridPageClient.tsx
+++ b/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
diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index 352a4a00..c4c4108f 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/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,
diff --git a/src/utility/useViewportHeight.ts b/src/utility/useViewportHeight.ts
new file mode 100644
index 00000000..4886ca50
--- /dev/null
+++ b/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;
+}
diff --git a/src/utility/useVisualViewport.ts b/src/utility/useVisualViewport.ts
deleted file mode 100644
index bed303a0..00000000
--- a/src/utility/useVisualViewport.ts
+++ /dev/null
@@ -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;
-}