improve layout of portrait images in landscape mode

src/components/MasonryGallery.tsx

@@ -33,14 +33,12 @@ const MasonryGallery = ({
   debugRating,
   linkState,
 }: MasonryGalleryProps) => {
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 38 ~ themeBreakpoints", themeBreakpoints)
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
     [aspectTargetsByBreakpoint]
   );
 
   const { breakpoint } = useBreakpoint(breakpoints, "sm");
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 43 ~ breakpoint", breakpoint)
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images).filter(Boolean),

src/pages/index.tsx

@@ -11,13 +11,18 @@ import { getHelmetSafeBodyStyle, getVibrant, getAspectRatio } from "../utils";
 import Nav from "../components/Nav";
 import ActionButtons from "../components/index/ActionButtons";
 import { use100vh } from "react-div-100vh";
+import { useMediaQuery } from "../useMediaQuery";
 
 const env =
   process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
 
 export type HomepageImage = Queries.IndexPageQuery["allFile"]["nodes"][number];
 
-const getDifferentRand = (range: number, lastNs: number[], iterations = 0): number => {
+const getDifferentRand = (
+  range: number,
+  lastNs: number[],
+  iterations = 0
+): number => {
   const n = Math.floor(Math.random() * range);
   if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) {
     console.log("got dupe, trying again", n);
@@ -36,7 +41,6 @@ const IndexPage = ({
   const image = React.useMemo(() => {
     return images[imageIndex];
   }, [images, imageIndex]);
-  console.log(image);
 
   const shuffleImage = React.useCallback(
     (currentImage?: typeof images[number]) => {
@@ -101,6 +105,8 @@ const IndexPage = ({
     };
   }, [imageIndex, images.length, image, shuffleImage]);
 
+  const browserIsLandscape = useMediaQuery("(orientation: landscape)");
+
   const vibrant = getVibrant(image);
   const ar = getAspectRatio(image);
 
@@ -193,12 +199,13 @@ const IndexPage = ({
             className={classnames(
               imageIsLandscape
                 ? "landscape:h-actual-screen portrait:h-two-thirds-vw"
-                : "h-actual-screen portrait:w-full landscape:w-1/2"
+                : "h-actual-screen portrait:w-full"
             )}
             image={img}
             loading="eager"
             style={{
               gridArea: "1/1",
+              width: browserIsLandscape && !imageIsLandscape ? `${ar * 100}vh` : "100%",
             }}
           />
         ) : (

src/pages/photogallery.tsx

@@ -19,16 +19,6 @@ const SORT_KEYS = {
 export type GalleryImage =
   Queries.GalleryPageQueryQuery["allFile"]["nodes"][number];
 
-const debugWrap =
-  (name: string, fn: Function) =>
-  (...asdf: any) => {
-    try {
-      return fn(...asdf);
-    } catch (e) {
-      console.log("threw in " + name, e);
-    }
-  };
-
 const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
   const hash =
     typeof window !== "undefined" ? window.location.hash.replace("#", "") : "";
@@ -82,7 +72,6 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
   );
 
   const removeHash = React.useCallback(() => {
-    console.log("rh");
     const url = new URL(
       typeof window !== "undefined"
         ? window.location.href.toString()
@@ -103,7 +92,6 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
     if (!el) {
       return;
     }
-    console.log("scrolling into view", el);
     el.scrollIntoView({
       block: "center",
     });
@@ -168,7 +156,6 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
       return [];
     }
   }, [data, sortKey, filterKeyword]);
-  console.log("🚀 ~ file: photogallery.tsx ~ line 175 ~ GalleryPage ~ filterKeyword", filterKeyword)
 
   return (
     <>

src/useMediaQuery.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const getMatches = (query: string): boolean => {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches
+    }
+    return false
+  }
+
+  const [matches, setMatches] = useState<boolean>(getMatches(query))
+
+  function handleChange() {
+    setMatches(getMatches(query))
+  }
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query)
+
+    // Triggered at the first client-side load and if query changes
+    handleChange()
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange)
+    } else {
+      matchMedia.addEventListener('change', handleChange)
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange)
+      } else {
+        matchMedia.removeEventListener('change', handleChange)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  return matches
+}