modal expand bug fix

frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx

@@ -68,10 +68,6 @@ interface GalleryModalProps {
     media_id: string | undefined
   ) => Promise<void>;
   isOpen?: boolean;
-  /**
-   * Optional filter to force when opening the modal. When set, users cannot change the filter.
-   * Possible values: "all", "image", "video", "3d", "uploaded"
-   */
   forceFilter?: string;
 }
 
@@ -344,6 +340,7 @@ export const GalleryModal = React.memo(
     return (
       <>
         <Modal
+          resizable={mode === "view"}
           isOpen={
             mode === "view"
               ? galleryModalVisibleViewMode.value &&
@@ -361,7 +358,8 @@ export const GalleryModal = React.memo(
           }}
           className={twMerge(
             "h-[620px] max-w-4xl",
-            mode === "view" && "h-[640px] w-[56rem]"
+            mode === "view" &&
+              "h-[640px] min-h-[640px] min-w-[56rem] w-[56rem] max-w-none"
           )}
           childPadding={false}
           showClose={false}

frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx

@@ -62,7 +62,7 @@ export function LightboxModal({
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      className="rounded-xl bg-[#2C2C2C] h-[80vh] w-[60vw] max-w-screen"
+      className="rounded-xl bg-[#2C2C2C] h-[80vh] w-[60vw] max-w-screen min-w-[35vw] min-h-[40vh]"
       draggable
       allowBackgroundInteraction={true}
       showClose={true}

frontend/libs/components/modal/src/lib/modal.tsx

@@ -247,25 +247,10 @@ export const Modal = ({
   resizable?: boolean;
   disableHotkeyInput?: (level: number) => void;
   enableHotkeyInput?: (level: number) => void;
-  /**
-   * Optional initial position for the modal (only used on first open, if no previous position is stored)
-   */
   initialPosition?: { x: number; y: number };
-  /**
-   * If false, clicking the backdrop will NOT close the modal
-   */
   closeOnOutsideClick?: boolean;
-  /**
-   * If true, pressing the Escape key will close the modal
-   */
   closeOnEsc?: boolean;
-  /**
-   * If true, allow interacting with background (removes pointer events from backdrop)
-   */
   allowBackgroundInteraction?: boolean;
-  /**
-   * If true, show expand button and allow expanding modal to fill window
-   */
   expandable?: boolean;
 }) => {
   // Draggable logic
@@ -406,26 +391,6 @@ export const Modal = ({
     };
   }, [dragging, zIndex]);
 
-  // Center modal if not being dragged
-  const getModalStyle = (): React.CSSProperties => {
-    if (!draggable || !position) {
-      // If allowBackgroundInteraction, set pointerEvents: 'auto' for modal
-      return {
-        ...(size ? { width: size.width, height: size.height } : {}),
-        ...(allowBackgroundInteraction ? { pointerEvents: "auto" } : {}),
-      };
-    }
-    return {
-      position: "fixed",
-      left: position.x,
-      top: position.y,
-      margin: 0,
-      zIndex,
-      ...(size ? { width: size.width, height: size.height } : {}),
-      ...(allowBackgroundInteraction ? { pointerEvents: "auto" } : {}),
-    };
-  };
-
   // Calculate initial center position on first drag
   const handleDragStart = (e: React.MouseEvent) => {
     if (!modalRef.current) return;
@@ -828,6 +793,39 @@ export const Modal = ({
     updateModal(idRef.current, { zIndex, onClose, closeOnEsc });
   }, [isOpen, zIndex, onClose, closeOnEsc]);
 
+  const getModalStyle = (): React.CSSProperties => {
+    // fill the entire viewport even if theres a stored size or position
+    if (expanded) {
+      return {
+        position: "fixed",
+        left: 0,
+        top: 0,
+        margin: 0,
+        zIndex,
+        width: "100vw",
+        height: "100vh",
+        ...(allowBackgroundInteraction ? { pointerEvents: "auto" } : {}),
+      };
+    }
+
+    if (!draggable || !position) {
+      // If allowBackgroundInteraction, set pointerEvents: 'auto' for modal
+      return {
+        ...(size ? { width: size.width, height: size.height } : {}),
+        ...(allowBackgroundInteraction ? { pointerEvents: "auto" } : {}),
+      };
+    }
+    return {
+      position: "fixed",
+      left: position.x,
+      top: position.y,
+      margin: 0,
+      zIndex,
+      ...(size ? { width: size.width, height: size.height } : {}),
+      ...(allowBackgroundInteraction ? { pointerEvents: "auto" } : {}),
+    };
+  };
+
   return (
     <Transition appear show={isOpen} as={Fragment}>
       <Dialog