From 24d65b50b432405358d9659d03a304ba58f7ad3b Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Thu, 18 Dec 2025 22:56:50 +0200
Subject: [PATCH] style: enhance overlay styling and adjust close button
 positioning

---
 .../fullscreen-media-modal.scss               | 27 ++++++++++++++++---
 .../fullscreen-media-modal.tsx                |  5 ++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
index 454653b8..d46958ff 100644
--- a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
@@ -1,5 +1,21 @@
 @use "../../scss/globals.scss";
 
+.fullscreen-media-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(2px);
+  z-index: globals.$backdrop-z-index;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
 .fullscreen-media-modal {
   display: flex;
   justify-content: center;
@@ -7,12 +23,17 @@
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  max-width: none;
+  max-height: none;
 
   &__close-button {
     position: absolute;
-    top: calc(globals.$spacing-unit * 4);
-    right: calc(globals.$spacing-unit * 3);
+    top: calc(globals.$spacing-unit * 5);
+    right: calc(globals.$spacing-unit * 4);
     cursor: pointer;
     color: globals.$body-color;
     background-color: rgba(0, 0, 0, 0.5);
diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
index 700bddb1..f3722154 100644
--- a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
@@ -3,7 +3,6 @@ import { createPortal } from "react-dom";
 import { XIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 
-import { Backdrop } from "../backdrop/backdrop";
 import "./fullscreen-media-modal.scss";
 
 export interface FullscreenMediaModalProps {
@@ -64,7 +63,7 @@ export function FullscreenMediaModal({
   if (!visible || !src) return null;
 
   return createPortal(
-    <Backdrop>
+    <div className="fullscreen-media-modal__overlay">
       <dialog className="fullscreen-media-modal" open aria-label={alt}>
         <button
           type="button"
@@ -82,7 +81,7 @@ export function FullscreenMediaModal({
           <img src={src} alt={alt} className="fullscreen-media-modal__image" />
         </div>
       </dialog>
-    </Backdrop>,
+    </div>,
     document.body
   );
 }