Revert "1234"

This reverts commit 621ee60521.

frontend/src/pages/Writer/Images.tsx

@@ -569,28 +569,22 @@ export default function Images() {
         isLoading={isUpdatingStatus}
       />
 
-      {/* Lightbox - Use same background as Modal */}
+      {/* Lightbox */}
       {lightboxOpen && (
-        <div className="fixed inset-0 z-[999999] flex items-center justify-center">
+        <div className="fixed inset-0 z-[99999]">
-          {/* Modal background - same as ImageQueueModal */}
+          <Lightbox
-          <div
+            open={lightboxOpen}
-            className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
+            close={() => setLightboxOpen(false)}
+            index={lightboxIndex}
+            slides={lightboxSlides}
+            on={{ view: ({ index }) => setLightboxIndex(index) }}
+          />
+          {/* Custom Close Button - Match Modal Style */}
+          <button
             onClick={() => setLightboxOpen(false)}
-          ></div>
+            className="absolute right-3 top-3 z-[999999] flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
-          <div className="relative z-[9999999]">
+            aria-label="Close lightbox"
-            <Lightbox
+          >
-              open={lightboxOpen}
-              close={() => setLightboxOpen(false)}
-              index={lightboxIndex}
-              slides={lightboxSlides}
-              on={{ view: ({ index }) => setLightboxIndex(index) }}
-            />
-            {/* Custom Close Button - Match Modal Style */}
-            <button
-              onClick={() => setLightboxOpen(false)}
-              className="absolute right-3 top-3 z-[99999999] flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
-              aria-label="Close lightbox"
-            >
             <svg
               width="24"
               height="24"

frontend/src/styles/igny8-colors.css

@@ -230,6 +230,22 @@
 .igny8-badge-danger { background: var(--igny8-red); }
 .igny8-badge-purple { background: var(--igny8-purple); }
 
+/* ===================================================================
+   LIGHTBOX STYLES - Match Modal Background
+   =================================================================== */
+/* Use same background as modals: bg-gray-400/50 backdrop-blur-[32px] */
+.yarl__container {
+  background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
+  backdrop-filter: blur(32px) !important;
+  -webkit-backdrop-filter: blur(32px) !important;
+}
+
+.yarl__backdrop {
+  background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
+  backdrop-filter: blur(32px) !important;
+  -webkit-backdrop-filter: blur(32px) !important;
+}
+
 /* ===================================================================
    COMPACT LAYOUT STYLES (Global - Apply to all pages)
    =================================================================== */