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;
   }
 

package-lock.json

@@ -18,6 +18,7 @@
         "@opentelemetry/sdk-metrics": "^1.25.1",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-visually-hidden": "^1.1.0",
         "@react-aria/ssr": "^3.9.5",
         "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.9",
         "@t3-oss/env-nextjs": "^0.9.2",
@@ -3996,6 +3997,28 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-aria/breadcrumbs": {
       "version": "3.5.11",
       "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.11.tgz",

package.json

@@ -34,6 +34,7 @@
     "@opentelemetry/sdk-metrics": "^1.25.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "@react-aria/ssr": "^3.9.5",
     "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.9",
     "@t3-oss/env-nextjs": "^0.9.2",