From d1a1dba210fdbd7db819af0ec573a06290335658 Mon Sep 17 00:00:00 2001
From: Sped0n <hi@sped0n.com>
Date: Tue, 25 Nov 2025 20:33:57 +0800
Subject: [PATCH] feat(gallery): enhance close button accessibility

Add .navClose styles for 30% min-width, right alignment, and pointer cursor.
Apply class to close div in mobile gallery nav for consistent keyboard support.

Signed-off-by: Sped0n <hi@sped0n.com>
---
 assets/scss/_partial/_gallery.scss | 6 ++++++
 assets/ts/mobile/galleryNav.tsx    | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/scss/_partial/_gallery.scss b/assets/scss/_partial/_gallery.scss
index 06aaade..fb3b6e8 100644
--- a/assets/scss/_partial/_gallery.scss
+++ b/assets/scss/_partial/_gallery.scss
@@ -51,6 +51,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    .navClose {
+      min-width: 30%;
+      text-align: right;
+      cursor: pointer;
+    }
   }
 }
 
diff --git a/assets/ts/mobile/galleryNav.tsx b/assets/ts/mobile/galleryNav.tsx
index 38b3bf3..cd652e1 100644
--- a/assets/ts/mobile/galleryNav.tsx
+++ b/assets/ts/mobile/galleryNav.tsx
@@ -37,7 +37,7 @@ export default function GalleryNav(props: {
           <span class="num">{indexLength()[2]}</span>
           <span class="num">{indexLength()[3]}</span>
         </div>
-        <div onClick={onClick} onKeyDown={onClick}>
+        <div class="navClose" onClick={onClick} onKeyDown={onClick}>
           {capitalizeFirstLetter(props.closeText)}
         </div>
       </div>