From 183f298f07a2dcef21cedf839744910e21b9553c Mon Sep 17 00:00:00 2001
From: thxforall <113906780+thxforall@users.noreply.github.com>
Date: Thu, 21 May 2026 19:55:57 +0900
Subject: [PATCH] fix(modal): prevent maximize/close buttons from overlapping
 social actions (#528)

- Keep maximize/close buttons fixed at top-right on all breakpoints
- Convert SocialActions footer to floating pill bar matching full-page style

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/web/lib/components/detail/ImageDetailModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/lib/components/detail/ImageDetailModal.tsx b/packages/web/lib/components/detail/ImageDetailModal.tsx
index e9b97566..01d957ea 100644
--- a/packages/web/lib/components/detail/ImageDetailModal.tsx
+++ b/packages/web/lib/components/detail/ImageDetailModal.tsx
@@ -391,7 +391,7 @@ export function ImageDetailModal({
         {image && (
           <div
             data-testid="modal-actions-footer"
-            className="border-t border-border bg-background/95 backdrop-blur-sm px-4 py-3 pb-[calc(env(safe-area-inset-bottom,0px)+12px)]"
+            className="absolute bottom-6 left-1/2 z-30 -translate-x-1/2 rounded-full border border-white/10 bg-background/80 px-2 py-1.5 shadow-lg backdrop-blur-xl"
           >
             <SocialActions
               liked={
@@ -414,7 +414,7 @@ export function ImageDetailModal({
             />
           </div>
         )}
-        <div className="absolute top-4 right-4 md:top-auto md:right-auto md:bottom-6 md:left-6 z-20 flex gap-3">
+        <div className="absolute top-4 right-4 z-20 flex gap-3">
           <button
             onClick={handleMaximize}
             className="flex h-11 w-11 items-center justify-center rounded-full bg-black/80 text-white backdrop-blur-sm transition-transform hover:scale-105 hover:bg-black active:scale-95 dark:bg-white/80 dark:text-black dark:hover:bg-white"