From c8116242f07cbe2ac3af2fd9d61b7c5ae18b2080 Mon Sep 17 00:00:00 2001
From: ralksta <ralksta@users.noreply.github.com>
Date: Sat, 7 Mar 2026 09:50:05 +0100
Subject: [PATCH] fix: resolve React hydration error #418 and improve lightbox
 robustness by using string attributes and visible-by-default images

---
 app/layout.tsx                 | 6 +++---
 components/Lightbox.module.css | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index e867853..dc4fc2b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -60,10 +60,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       suppressHydrationWarning
       style={themeVars as React.CSSProperties}
       data-preset={theme.preset}
-      data-grain={theme.grain}
-      data-header-dot={theme.headerDot}
+      data-grain={String(theme.grain)}
+      data-header-dot={String(theme.headerDot)}
       data-photo-frame={theme.photoFrame}
-      data-transitions={config.transitions}
+      data-transitions={String(config.transitions)}
     >
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/components/Lightbox.module.css b/components/Lightbox.module.css
index a85a198..82565b5 100644
--- a/components/Lightbox.module.css
+++ b/components/Lightbox.module.css
@@ -53,7 +53,7 @@
   border-radius: var(--radius-sm);
   user-select: none;
   -webkit-user-drag: none;
-  opacity: 0;
+  opacity: 1; /* Default to visible for robustness */
   transition: opacity var(--transition-normal);
 }