more layout fixes and full screen mobile modal

packages/fakeyou.com/src/components/common/Modal/Modal.scss

@@ -66,8 +66,8 @@
 
 .fy-core-modal {
   .modal-content {
-    width: 85vw;
-    height: 85vh;
+    // width: 85vw;
+    min-height: 70vh;
     padding: 1rem;
   }
 }

packages/fakeyou.com/src/components/providers/ModalProvider/ModalProvider.tsx

@@ -3,33 +3,38 @@ import { ModalContext } from "context";
 import { Modal } from "components/common";
 
 interface Props {
-  children?: any,
+  children?: any;
 }
 
 interface ModalConfig {
-  component: React.ElementType,
-  props?: any
+  component: React.ElementType;
+  props?: any;
 }
 
 export default function ModalProvider({ children }: Props) {
-  const [modalState,modalStateSet] = useState<ModalConfig | null>(null);
-  const open = (cfg: ModalConfig) =>  modalStateSet(cfg);
+  const [modalState, modalStateSet] = useState<ModalConfig | null>(null);
+  const open = (cfg: ModalConfig) => modalStateSet(cfg);
   const close = () => modalStateSet(null);
 
-  return <ModalContext.Provider {...{ value: { close, open, modalState } }}>
-    { children }
-    {
-     <Modal {...{
-        autoWidth: true,
-        className: "fy-core-modal",
-        content: modalState?.component,
-        contentProps: modalState?.props,
-        handleClose: close,
-        noHeader: true,
-        omitBody: true,
-        show: !!modalState?.component,
-        showButtons: false,
-      }}/> 
-    }
-  </ModalContext.Provider>
-};
+  return (
+    <ModalContext.Provider {...{ value: { close, open, modalState } }}>
+      {children}
+      {
+        <Modal
+          {...{
+            large: true,
+            className: "fy-core-modal",
+            content: modalState?.component,
+            contentProps: modalState?.props,
+            handleClose: close,
+            noHeader: true,
+            omitBody: true,
+            show: !!modalState?.component,
+            showButtons: false,
+            mobileFullscreen: true,
+          }}
+        />
+      }
+    </ModalContext.Provider>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.scss

@@ -1,9 +1,5 @@
 .fy-engine-compositor {
-  padding: 1rem;
-
   .engine-compositor-container {
-    padding: 1rem;
-
     header {
       margin-bottom: 1.5rem;
       display: flex;
@@ -12,12 +8,17 @@
       width: 100%;
     }
 
-    h2, .fy-temp-select, .fy-input { margin-bottom: 0; }
+    h2,
+    .fy-temp-select,
+    .fy-input {
+      margin-bottom: 0;
+    }
   }
   .compositor-content {
     display: flex;
-    gap: 1rem;
 
-    > * { width: 100%; }
+    > * {
+      width: 100%;
+    }
   }
-}
+}

packages/fakeyou.com/src/v2/view/pages/EngineCompositor/EngineCompositor.tsx

@@ -1,14 +1,16 @@
 import React, { useState } from "react";
-import { Button } from "components/common";
+import { Button, Container, Panel } from "components/common";
 import { EntityInput } from "components/entities";
 import { useInferenceJobs } from "hooks";
 import InferenceJobsList from "components/layout/InferenceJobsList";
 import { EnqueueEngineCompositing } from "@storyteller/components/src/api/engine_compositor/EnqueueEngineCompositing";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { v4 as uuidv4 } from "uuid";
-import "./EngineCompositor.scss"
+import "./EngineCompositor.scss";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTransporter } from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
   value?: any;
@@ -16,21 +18,22 @@ interface Props {
 }
 
 export default function EngineCompositor({ value, sessionWrapper }: Props) {
-  const [mediaToken,mediaTokenSet] = useState();
+  const [mediaToken, mediaTokenSet] = useState();
   const onChange = ({ target }: any) => mediaTokenSet(target.value);
-  const inferenceJobs = useInferenceJobs(FrontendInferenceJobType.EngineComposition);
+  const inferenceJobs = useInferenceJobs(
+    FrontendInferenceJobType.EngineComposition
+  );
 
   const onClick = () => {
-    EnqueueEngineCompositing("",{
-        uuid_idempotency_token: uuidv4(),
-        video_source: mediaToken || "",
-    })
-    .then((res: any) => {
-        if (res && res.success) {
-          inferenceJobs.enqueue(res.inference_job_token);
-        }
-      });
-  }
+    EnqueueEngineCompositing("", {
+      uuid_idempotency_token: uuidv4(),
+      video_source: mediaToken || "",
+    }).then((res: any) => {
+      if (res && res.success) {
+        inferenceJobs.enqueue(res.inference_job_token);
+      }
+    });
+  };
 
   const failures = (fail = "") => {
     switch (fail) {
@@ -40,22 +43,38 @@ export default function EngineCompositor({ value, sessionWrapper }: Props) {
   };
 
   if (!sessionWrapper.canAccessStudio()) {
-    return <StudioNotAvailable />
+    return <StudioNotAvailable />;
   }
 
-  return <div {...{ className: "fy-engine-compositor"}}>
-    <div {...{ className: "panel engine-compositor-container" }}>
-      <header>
-        <h2>Engine Compositor</h2>
-        <Button {...{ label: "Enqueue", onClick, variant: "primary" }}/>
-      </header>
-       <EntityInput {...{ aspectRatio: "landscape", label: "Choose 3D data", onChange, mediaType: "bvh" }}/>
-    </div>
-      <InferenceJobsList
-        {...{
-          failures,
-          jobType: FrontendInferenceJobType.EngineComposition,
-        }}
-      />
-  </div>;
-};
+  return (
+    <Container type="panel" className="mt-5">
+      <Panel padding={true}>
+        <div {...{ className: "fy-engine-compositor" }}>
+          <div {...{ className: "engine-compositor-container" }}>
+            <header className="d-flex gap-3 flex-wrap">
+              <h1 className="fw-semibold">
+                <FontAwesomeIcon icon={faTransporter} className="me-3 fs-2" />
+                Engine Compositor
+              </h1>
+              <Button {...{ label: "Enqueue", onClick, variant: "primary" }} />
+            </header>
+            <EntityInput
+              {...{
+                aspectRatio: "landscape",
+                label: "Choose 3D data",
+                onChange,
+                mediaType: "bvh",
+              }}
+            />
+          </div>
+          <InferenceJobsList
+            {...{
+              failures,
+              jobType: FrontendInferenceJobType.EngineComposition,
+            }}
+          />
+        </div>
+      </Panel>
+    </Container>
+  );
+}