From 2c66aa9f49e9b65f4fe9cbba1f569e13b661e5eb Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 9 Jul 2022 16:44:48 -0700
Subject: [PATCH] Responsive strategy for photo gallery header

---
 src/components/KeywordsPicker.js | 4 ++--
 src/components/MasonryGallery.js | 4 ++--
 src/pages/photogallery.js        | 9 +++++----
 3 files changed, 9 insertions(+), 8 deletions(-)
diff --git a/src/components/KeywordsPicker.js b/src/components/KeywordsPicker.js
index 853c898..1286e7b 100644
--- a/src/components/KeywordsPicker.js
+++ b/src/components/KeywordsPicker.js
@@ -1,10 +1,10 @@
-import classNames from "classnames";
 import * as React from "react";
+import classNames from "classnames";
 
 const KeywordsPicker = ({ keywords, value, onChange }) => {
   return (
     <div className="mx-2">
-      <span className="text-xs text-[#A2A2A2]">Filter by...</span>
+      <span className="text-xs text-[#A2A2A2]">Filter...</span>
       <ul className="flex gap-1 flex-wrap mt-1 mb-2">
         {keywords.map((keyword) => {
           const selected = value === keyword;
diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js
index d6c2361..5a41144 100644
--- a/src/components/MasonryGallery.js
+++ b/src/components/MasonryGallery.js
@@ -17,9 +17,9 @@ const MasonryGallery = ({
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
     [aspectTargetsByBreakpoint]
-  );
+    );
 
-  const { breakpoint } = useBreakpoint(breakpoints, "sm");
+  const { breakpoint } = useBreakpoint(breakpoints, "md");
 
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {
diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js
index ccc5ee7..2a72fe1 100644
--- a/src/pages/photogallery.js
+++ b/src/pages/photogallery.js
@@ -89,7 +89,7 @@ const GalleryPage = ({ data }) => {
         <title>Photo Gallery | Chuck Dries</title>
         <body className="bg-black text-white" />
       </Helmet>
-      <div className="sticky top-0 z-10 bg-black">
+      <div className="sm:sticky top-0 z-10 bg-black">
         <nav className="mt-1 ml-1 text-lg mb-4">
           <button
             className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
@@ -111,8 +111,8 @@ const GalleryPage = ({ data }) => {
             gallery
           </Link>
         </nav>
-        <div className="flex flex-row items-end">
-          <h1 className="text-3xl sm:text-5xl mt-0 ml-5 font-serif font-black z-10 flex-auto">
+        <div className="flex flex-col md:flex-row md:items-end">
+          <h1 className="text-5xl mt-0 ml-5 mr-5 font-serif font-black z-10 flex-auto">
             Photo Gallery
           </h1>
           <KeywordsPicker
@@ -126,12 +126,13 @@ const GalleryPage = ({ data }) => {
               "waterfall",
               "fireworks",
               "panoramic",
+              "Portland Japanese Garden",
               // "sunset",
             ]}
             onChange={setKeyword}
             value={keyword}
           />
-          <div className="m-2 ml-5 self-end">
+          <div className="m-2">
             <Picker
               label="Sort by..."
               onSelectionChange={setSortKey}
