From c36e88d8ced71f5728ce6898a536264ed5ef4263 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 29 Jul 2025 20:11:04 +0700
Subject: [PATCH] expandable lightbox to fullscreen

---
 .../components/lightbox-modal/src/lib/lightbox-modal.tsx   | 3 ++-
 frontend/libs/components/modal/src/lib/modal.tsx           | 7 ++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
index 074c080970..acd1a97b61 100644
--- a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
+++ b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
@@ -151,13 +151,14 @@ export function LightboxModal({
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      className="rounded-xl bg-[#2C2C2C] h-[75vh] w-[60vw] max-w-screen min-w-[35vw] min-h-[40vh]"
+      className="rounded-xl bg-[#2C2C2C] h-[75vh] w-[60vw] max-w-screen min-w-[35vw] min-h-[40vh] p-4"
       draggable
       allowBackgroundInteraction={true}
       showClose={true}
       closeOnOutsideClick={false}
       resizable={true}
       backdropClassName="pointer-events-none hidden"
+      expandable={true}
     >
       {/* Invisible drag handle strip at the very top for moving */}
       <Modal.DragHandle>
diff --git a/frontend/libs/components/modal/src/lib/modal.tsx b/frontend/libs/components/modal/src/lib/modal.tsx
index d8feb85763..c6b8b923f4 100644
--- a/frontend/libs/components/modal/src/lib/modal.tsx
+++ b/frontend/libs/components/modal/src/lib/modal.tsx
@@ -949,9 +949,10 @@ export const Modal = ({
                   {/* resize handles inside panel so clicks don't count as outside */}
                   {renderResizeHandles()}
                 </DialogPanel>
-                {showClose && (
-                  <div className="absolute top-0 right-0 m-2.5 z-[80]">
-                    <CloseButton onClick={onClose} />
+                {(showClose || expandable) && (
+                  <div className="absolute top-0 right-0 m-2.5 z-[80] flex items-center gap-2">
+                    {expandable && <Modal.ExpandButton />}
+                    {showClose && <CloseButton onClick={onClose} />}
                   </div>
                 )}
               </TransitionChild>