expandable lightbox to fullscreen

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>

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>