hacky solution for auto scroll feature for now

src/components/GalleryImage/GalleryImage.js

@@ -51,7 +51,7 @@ const GalleryImage = ({ data, pageContext }) => {
         case "Escape":
         case "KeyG": {
           logKeyShortcut(e.code);
-          navigate("/photogallery/");
+          navigate(`/photogallery/#${image.base}`);
         }
       }
     };
@@ -59,7 +59,7 @@ const GalleryImage = ({ data, pageContext }) => {
     return () => {
       document.removeEventListener("keydown", keyListener);
     };
-  }, [pageContext]);
+  }, [pageContext, image.base]);
 
   const name = getName(image);
   const { meta, dateTaken: dt } = getMeta(image);

src/components/MasonryGallery.js

@@ -16,10 +16,9 @@ const MasonryGallery = ({
     [aspectTargetsByBreakpoint]
   );
 
-  const { breakpoint } = useBreakpoint(breakpoints, "xs");
+  const { breakpoint } = useBreakpoint(breakpoints, "sm");
   console.log("🚀 ~ file: MasonryGallery.js ~ line 20 ~ breakpoint", breakpoint)
 
-  // const [scrolled, setScrolled] = React.useState(false);
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {
       return;
@@ -28,20 +27,15 @@ const MasonryGallery = ({
     if (!el) {
       return;
     }
-    console.log("el", el);
     el.scrollIntoView();
-    console.log(
-      "🚀 ~ file: MasonryGallery.js ~ line 21 ~ scrollIntoView ~ el.offsetTop",
-      el.offsetTop
-    );
-    if (el.offsetTop > window.innerHeight && window.scrollY === 0) {
-      // queue another
-    }
   }, []);
 
   React.useEffect(() => {
-    scrollIntoView();
-  }, [scrollIntoView, breakpoint]);
+    // hacky but it works for now
+    setTimeout(() => {
+      scrollIntoView();
+    }, 100)
+  }, [scrollIntoView]);
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images),