outliner styling fixes and responsiveness (#519)

- outliner now responsive and fits the screen on resize for all views
(squared, verical, horizontal)
- vertical video styling bug fix 

others styling fixes:
- login page no scrollbars

app/pages/PageEnigma/PageEditor.tsx

@@ -19,11 +19,14 @@ import {
   dndTimelineHeight,
   editorLoader,
   sidePanelHeight,
+  cameraAspectRatio,
+  outlinerIsShowing,
 } from "~/pages/PageEnigma/signals";
 import { EditorCanvas } from "./comps/EngineCanvases";
 import { SceneContainer } from "./comps/SceneContainer";
 import { AspectRatioMenu } from "./comps/AspectRatioMenu";
 import { Outliner } from "./comps/Outliner";
+import { CameraAspectRatio } from "./enums";
 
 export const PageEditor = () => {
   useSignals();
@@ -55,7 +58,26 @@ export const PageEditor = () => {
 
   const getScale = () => {
     const height = sidePanelHeight.value;
-    const scaleHeight = height < 640 ? height / 640 : 1;
+    const scaleHeight = height < 610 ? height / 610 : 1;
+
+    if (
+      cameraAspectRatio.value === CameraAspectRatio.VERTICAL_9_16 &&
+      outlinerIsShowing.value &&
+      height < 900
+    ) {
+      if (pageWidth.value > 2000) {
+        return scaleHeight;
+      }
+      return scaleHeight * 0.78;
+    }
+
+    if (
+      cameraAspectRatio.value === CameraAspectRatio.SQUARE_1_1 &&
+      pageWidth.value < 2000
+    ) {
+      return scaleHeight * 0.85;
+    }
+
     return scaleHeight;
   };
 

app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx

@@ -215,7 +215,7 @@ export const ControlPanelSceneObject = () => {
 
   const getScale = () => {
     const height = sidePanelHeight.value;
-    return height < 660 ? height / 660 : 1;
+    return height < 620 ? height / 620 : 1;
   };
 
   return (
@@ -236,7 +236,8 @@ export const ControlPanelSceneObject = () => {
         <div className="flex items-center gap-2">
           <FontAwesomeIcon icon={faCube} />
           <p className="max-w-36 truncate font-semibold">
-            {currentSceneObject.object_name.charAt(0).toUpperCase() + currentSceneObject.object_name.slice(1)}
+            {currentSceneObject.object_name.charAt(0).toUpperCase() +
+              currentSceneObject.object_name.slice(1)}
           </p>
         </div>
         <FontAwesomeIcon

app/pages/PageEnigma/comps/Outliner/Outliner.tsx

@@ -22,6 +22,9 @@ import { Transition } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
 import { useSignals } from "@preact/signals-react/runtime";
 import { EngineContext } from "../../contexts/EngineContext";
+import { cameraAspectRatio, sidePanelHeight } from "../../signals";
+import { pageWidth } from "~/signals";
+import { CameraAspectRatio } from "../../enums";
 
 const OutlinerItem = ({ item }: { item: SceneObject }) => {
   useSignals();
@@ -29,8 +32,7 @@ const OutlinerItem = ({ item }: { item: SceneObject }) => {
 
   const isSelected = outlinerState.selectedItem.value?.id === item.id;
 
-
-  const editorEngine = useContext(EngineContext)
+  const editorEngine = useContext(EngineContext);
 
   // Delete object logic here
   const handleDeleteKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -69,7 +71,10 @@ const OutlinerItem = ({ item }: { item: SceneObject }) => {
         <button
           onClick={(e) => {
             e.stopPropagation();
-            toggleLock(item.id, editorEngine?.lockUnlockObject.bind(editorEngine));
+            toggleLock(
+              item.id,
+              editorEngine?.lockUnlockObject.bind(editorEngine),
+            );
           }}
           style={{
             opacity: hovered || item.locked ? 1 : 0,
@@ -85,7 +90,12 @@ const OutlinerItem = ({ item }: { item: SceneObject }) => {
         <button
           onClick={(e) => {
             e.stopPropagation();
-            toggleVisibility(item.id, editorEngine?.sceneManager?.hideObject.bind(editorEngine.sceneManager));
+            toggleVisibility(
+              item.id,
+              editorEngine?.sceneManager?.hideObject.bind(
+                editorEngine.sceneManager,
+              ),
+            );
           }}
           style={{
             opacity: hovered || !item.visible ? 1 : 0,
@@ -125,12 +135,35 @@ export const Outliner = () => {
     item.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
+  const getOutlinerHeightClass = () => {
+    if (pageWidth.value >= 2000) {
+      if (cameraAspectRatio.value === CameraAspectRatio.VERTICAL_9_16) {
+        return `${sidePanelHeight.value * 0.5 - 120}px`;
+      } else if (cameraAspectRatio.value === CameraAspectRatio.SQUARE_1_1) {
+        return `${sidePanelHeight.value * 0.42}px`;
+      } else {
+        return `${sidePanelHeight.value * 0.54}px`;
+      }
+    }
+
+    if (pageWidth.value < 2000) {
+      if (cameraAspectRatio.value === CameraAspectRatio.VERTICAL_9_16) {
+        return `${sidePanelHeight.value * 0.7 - 10}px`;
+      } else if (cameraAspectRatio.value === CameraAspectRatio.SQUARE_1_1) {
+        return `${sidePanelHeight.value * 0.7}px`;
+      } else {
+        return `${sidePanelHeight.value * 0.7}px`;
+      }
+    }
+  };
+
   return (
     <Transition
       show={outlinerIsShowing.value}
       className={twMerge(
-        "flex h-[34vh] w-[240px] origin-bottom-left flex-col overflow-hidden rounded-lg bg-ui-panel/95 shadow-lg",
+        "flex max-h-[34vh] w-[240px] origin-bottom-left flex-col overflow-hidden rounded-lg bg-ui-panel/95 shadow-lg",
       )}
+      style={{ height: getOutlinerHeightClass() }}
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
       enterTo="opacity-100"

app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx

@@ -16,7 +16,10 @@ import {
   editorState,
   editorLetterBox,
   toggleEditorLetterBox,
+  sidePanelHeight,
+  outlinerIsShowing,
 } from "~/pages/PageEnigma/signals";
+import { pageWidth } from "~/signals";
 import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums";
 import { CameraViewCanvas } from "~/pages/PageEnigma/comps/EngineCanvases";
 
@@ -37,15 +40,55 @@ export const PreviewEngineCamera = () => {
     });
   };
 
+  const getLargeScreenHeightClass = () => {
+    if (cameraAspectRatio.value === CameraAspectRatio.VERTICAL_9_16) {
+      return pageWidth.value >= 2000
+        ? "w-44 justify-center"
+        : "w-36 justify-center";
+    } else {
+      return pageWidth.value >= 2000
+        ? "w-72 justify-between"
+        : "w-64 justify-between";
+    }
+  };
+
+  const getSmallScreenHeightClass = () => {
+    if (
+      cameraAspectRatio.value === CameraAspectRatio.VERTICAL_9_16 &&
+      sidePanelHeight.value < 2000 &&
+      outlinerIsShowing.value
+    ) {
+      return "w-40 justify-center";
+    }
+    return "";
+  };
+
+  const getSquareAspectRatioClass = () => {
+    if (cameraAspectRatio.value === CameraAspectRatio.SQUARE_1_1) {
+      return pageWidth.value >= 2000
+        ? "w-[240px] justify-between"
+        : "w-60 justify-between";
+    }
+  };
+
   return (
     <div id="preview-engine-camera" className="origin-bottom-left shadow-lg">
-      <div className="relative">
+      <div
+        className={twMerge(
+          "relative",
+          getLargeScreenHeightClass(),
+          getSmallScreenHeightClass(),
+          getSquareAspectRatioClass(),
+        )}
+      >
         <div
           className={twMerge(
-            "origin -z-10 flex w-full flex-wrap items-center rounded-t-lg bg-ui-controls p-1.5 text-white",
+            "origin -z-10 flex h-auto w-full flex-wrap items-center gap-1.5 rounded-t-lg bg-ui-controls p-2 text-white",
             cameraAspectRatio.value !== CameraAspectRatio.VERTICAL_9_16
-              ? "h-11 w-72 justify-between"
-              : "h-20 w-44 justify-center",
+              ? "justify-between"
+              : "flex-col justify-center",
+            cameraAspectRatio.value === CameraAspectRatio.SQUARE_1_1 &&
+              "justify-center",
           )}
         >
           <div
@@ -65,6 +108,7 @@ export const PreviewEngineCamera = () => {
                 <ButtonIcon
                   icon={editorLetterBox.value ? faBlinds : faBlindsRaised}
                   onClick={() => toggleEditorLetterBox()}
+                  className="h-7 w-7"
                 />
               </Tooltip>
             )}
@@ -75,7 +119,7 @@ export const PreviewEngineCamera = () => {
               className="rounded-md px-2 py-1 text-sm"
             >
               {editorState.value === EditorStates.EDIT
-                ? "Enter Camera View"
+                ? "Enter View"
                 : "Exit View"}
             </Button>
           </div>
@@ -95,7 +139,7 @@ export const PreviewEngineCamera = () => {
           <div className="flex h-full w-full items-center justify-center bg-ui-panel">
             <FontAwesomeIcon icon={faSpinnerThird} size={"3x"} spin />
           </div>
-          <div className="absolute left-0 top-0 h-full w-full">
+          <div className="absolute left-0 top-0 h-full w-full overflow-hidden">
             <CameraViewCanvas className="!h-full !w-full" />
           </div>
         </div>

app/routes/Login.tsx

@@ -52,10 +52,7 @@ export default function LoginScreen() {
   });
 
   return (
-    <div
-      className="fixed w-full overflow-scroll"
-      style={{ height: "calc(100% - 72px)" }}
-    >
+    <div className="fixed w-full" style={{ height: "calc(100% - 72px)" }}>
       <div className="mx-auto my-6 w-10/12 max-w-2xl">
         <H1 className="text-center text-[32px] font-bold">
           Login to Storyteller