refactor: simplify GalleryThumbnail component structure

- Removed unnecessary background styling and improved layout for better readability.
- Streamlined the rendering of photo thumbnails while maintaining existing functionality.

Signed-off-by: Innei <tukon479@gmail.com>

apps/web/src/components/ui/photo-viewer/GalleryThumbnail.tsx

@@ -97,47 +97,45 @@ export const GalleryThumbnail: FC<{
 
   return (
     <m.div
-      className="bg-material-medium pb-safe z-10 shrink-0 backdrop-blur-3xl"
+      className="bg-material-ultra-thick pb-safe z-10 shrink-0"
       initial={{ y: 100 }}
       animate={{ y: 0 }}
       exit={{ y: 100 }}
       transition={Spring.presets.smooth}
     >
-      <div className="bg-material-medium backdrop-blur-[70px]">
-        <div
-          ref={scrollContainerRef}
-          className={`gallery-thumbnail-container scrollbar-none flex overflow-x-auto`}
-          style={{
-            gap: isMobile ? thumbnailGapSize.mobile : thumbnailGapSize.desktop,
-            padding: isMobile
-              ? thumbnailPaddingSize.mobile
-              : thumbnailPaddingSize.desktop,
-          }}
-        >
-          {photos.map((photo, index) => (
-            <button
-              type="button"
-              key={photo.id}
-              className={clsxm(
-                `flex-shrink-0 rounded-lg overflow-hidden ring-2 transition-all contain-intrinsic-size`,
-                index === currentIndex
-                  ? 'ring-accent scale-110'
-                  : 'ring-transparent hover:ring-accent',
-              )}
-              style={{
-                width: isMobile ? thumbnailSize.mobile : thumbnailSize.desktop,
-                height: isMobile ? thumbnailSize.mobile : thumbnailSize.desktop,
-              }}
-              onClick={() => onIndexChange(index)}
-            >
-              <img
-                src={photo.thumbnailUrl}
-                alt={photo.title}
-                className="h-full w-full object-cover"
-              />
-            </button>
-          ))}
-        </div>
+      <div
+        ref={scrollContainerRef}
+        className={`scrollbar-none flex overflow-x-auto`}
+        style={{
+          gap: isMobile ? thumbnailGapSize.mobile : thumbnailGapSize.desktop,
+          padding: isMobile
+            ? thumbnailPaddingSize.mobile
+            : thumbnailPaddingSize.desktop,
+        }}
+      >
+        {photos.map((photo, index) => (
+          <button
+            type="button"
+            key={photo.id}
+            className={clsxm(
+              `flex-shrink-0 rounded-lg overflow-hidden ring-2 transition-all contain-intrinsic-size`,
+              index === currentIndex
+                ? 'ring-accent scale-110'
+                : 'ring-transparent hover:ring-accent',
+            )}
+            style={{
+              width: isMobile ? thumbnailSize.mobile : thumbnailSize.desktop,
+              height: isMobile ? thumbnailSize.mobile : thumbnailSize.desktop,
+            }}
+            onClick={() => onIndexChange(index)}
+          >
+            <img
+              src={photo.thumbnailUrl}
+              alt={photo.title}
+              className="h-full w-full object-cover"
+            />
+          </button>
+        ))}
       </div>
     </m.div>
   )