Introduce deployment preview

Author: lucemans

web/src/components/modal/index.tsx

@@ -29,20 +29,32 @@ export const ModalContent = React.forwardRef<
         noPadding?: boolean;
         noCloseButton?: boolean;
         noBg?: boolean;
+        width?: 'full' | 'lg';
     }
 >(
     (
-        { className, children, noPadding, noCloseButton, noBg, ...properties },
+        {
+            className,
+            children,
+            noPadding,
+            noCloseButton,
+            noBg,
+            width,
+            ...properties
+        },
         reference
     ) => (
         <Dialog.Portal>
             <ModalOverlay />
             <Dialog.Content
                 ref={reference}
                 className={clsx(
-                    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border shadow-lg duration-200 sm:rounded-lg',
+                    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid -translate-x-1/2 -translate-y-1/2 gap-4 border shadow-lg duration-200 sm:rounded-lg',
                     noPadding ? '' : 'p-6',
                     noBg ? '' : 'bg-default',
+                    width === 'full'
+                        ? 'w-full max-w-[90vw]'
+                        : 'w-full max-w-lg',
                     className
                 )}
                 {...properties}

web/src/gui/deployments/DeploymentPreviewCover.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import { useDeploymentPreviews, useLastPreviewDeployment } from '@/api';
+import { ModalContent, ModalRoot, ModalTrigger } from '@/components';
 
 export const DeploymentPreviewCover: FC<{
     siteId: string;
@@ -16,15 +17,30 @@ export const DeploymentPreviewCover: FC<{
 
     return (
         <div className="flex">
-            <div className="aspect-video h-fit w-full max-w-sm overflow-hidden rounded-md border border-gray-200 bg-gray-100">
-                {previews && previews.length > 0 && (
-                    <img
-                        alt="Deployment Preview"
-                        src={previews[0].preview_path}
-                        className="size-full object-cover"
-                    />
-                )}
-            </div>
+            <ModalRoot>
+                <div className="aspect-video h-fit w-full max-w-sm overflow-hidden rounded-md border border-gray-200 bg-gray-100">
+                    <ModalTrigger>
+                        {previews && previews.length > 0 && (
+                            <img
+                                alt="Deployment Preview"
+                                src={previews[0].preview_path}
+                                className="size-full object-cover"
+                            />
+                        )}
+                    </ModalTrigger>
+                </div>
+                <ModalContent width="full" className="top-0 flex" noPadding>
+                    <div className="size-full max-h-[90vh] overflow-hidden rounded-md">
+                        <div className="h-full overflow-y-scroll">
+                            <img
+                                alt="Deployment Preview"
+                                src={previews[0].full_preview_path}
+                                className="h-auto w-full"
+                            />
+                        </div>
+                    </div>
+                </ModalContent>
+            </ModalRoot>
             {/* {previews &&
                 previews.length > 0 &&
                 previews[0].full_preview_path && (