fix(SW-337): better desktop gallery layout

components/Lightbox/Gallery.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { DialogTitle } from "@radix-ui/react-dialog"
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 import { AnimatePresence, motion } from "framer-motion"
 
 import { ChevronRightIcon } from "@/components/Icons"
@@ -55,14 +56,17 @@ export default function Gallery({
       </Button>
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
-        <div className={styles.galleryHeader}>
+        <VisuallyHidden asChild>
           <DialogTitle asChild>
-            <div className={styles.imageCaption}>
-              {mainImage.title && (
-                <Caption color="textMediumContrast">{mainImage.title}</Caption>
-              )}
-            </div>
+            <VisuallyHidden>Image Gallery</VisuallyHidden>
           </DialogTitle>
+        </VisuallyHidden>
+        <div className={styles.galleryHeader}>
+          {mainImage.title && (
+            <div className={styles.imageCaption}>
+              <Caption color="textMediumContrast">{mainImage.title}</Caption>
+            </div>
+          )}
         </div>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} mode="wait">
@@ -99,7 +103,7 @@ export default function Gallery({
             <ArrowRightIcon color="burgundy" />
           </motion.button>
         </div>
-        <div className={styles.thumbnailGrid}>
+        <div className={styles.desktopThumbnailGrid}>
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div

components/Lightbox/Lightbox.module.css

@@ -1,7 +1,3 @@
-.desktopGallery {
-  display: none;
-}
-
 .mobileGallery {
   height: 100%;
   position: relative;
@@ -61,10 +57,13 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--Spacing-x1);
+  height: 1.71875rem;
 }
 
-.desktopGalleryCloseButton {
+.desktopGallery,
+.desktopGalleryCloseButton,
+.desktopThumbnailGrid,
+.navigationButton {
   display: none;
 }
 
@@ -76,8 +75,7 @@
 
 .mainImageWrapper {
   position: relative;
-  flex: 1;
-  margin-bottom: var(--Spacing-x2);
+  width: 100%;
 }
 
 .mainImageContainer {
@@ -164,15 +162,16 @@
   border-radius: var(--Corner-radius-Small);
 }
 
-.navigationButton {
-  display: none;
-}
-
 .portraitImage {
   max-width: 548px;
 }
 
 @media (min-width: 1367px) {
+  .mobileGallery,
+  .thumbnailGrid {
+    display: none;
+  }
+
   .content {
     border-radius: var(--Corner-radius-Large);
     position: fixed;
@@ -196,10 +195,10 @@
   }
 
   .desktopGallery {
-    display: flex;
+    display: grid;
+    grid-template-rows: 1.71875rem 1fr 7.8125rem;
     background-color: var(--Base-Background-Primary-Normal);
     height: 100%;
-    flex-direction: column;
     position: relative;
     overflow: hidden;
   }
@@ -211,15 +210,11 @@
     right: var(--Spacing-x-half);
   }
 
-  .mobileGallery {
-    display: none;
-  }
-
-  .thumbnailGrid {
+  .desktopThumbnailGrid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: var(--Spacing-x1);
-    max-height: 125px;
+    max-height: 7.8125rem;
     overflow: hidden;
   }