From 0a87e0d176cddeee89dfc2499c1f44b32663dba5 Mon Sep 17 00:00:00 2001
From: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
Date: Mon, 22 Apr 2024 08:30:03 -0400
Subject: [PATCH] Better handling of sidepanel width changes

---
 .../comps/PreviewEngineCamera/index.tsx       | 22 ++++++++++---------
 .../itemTabs/StylizeTab/StyleSelection.tsx    | 12 +++++-----
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx
index f30046bc00..b5d3073829 100644
--- a/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx
+++ b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx
@@ -16,6 +16,10 @@ export const PreviewEngineCamera = () => {
     setTimeout(() => setShowLoader(false), 1000);
   }, []);
 
+  if (editorState.value === EditorStates.PREVIEW) {
+    return null;
+  }
+
   const handleButtonCameraView = () => {
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,
@@ -33,16 +37,14 @@ export const PreviewEngineCamera = () => {
             <p className="mt-[2px] text-sm font-medium">Camera View</p>
           </div>
 
-          {editorState.value !== EditorStates.PREVIEW && (
-            <Button
-              variant="action"
-              onClick={handleButtonCameraView}
-              className="px-2.5 py-1 text-sm">
-              {editorState.value === EditorStates.EDIT
-                ? "Enter Camera View"
-                : "Exit Camera View"}
-            </Button>
-          )}
+          <Button
+            variant="action"
+            onClick={handleButtonCameraView}
+            className="px-2.5 py-1 text-sm">
+            {editorState.value === EditorStates.EDIT
+              ? "Enter Camera View"
+              : "Exit Camera View"}
+          </Button>
         </div>
         <div className="box relative overflow-hidden rounded-b-lg border border-gray-600">
           <canvas className="aspect-video max-h-40" id="camera-view"></canvas>
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleSelection.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleSelection.tsx
index 3badaf6aa1..70e7dfc647 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleSelection.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleSelection.tsx
@@ -20,11 +20,13 @@ export const StyleSelection = () => {
     90 + (sidePanelWidth.value - 32 - shownImageCount * 98) / shownImageCount;
   const imageHeight = (54 * imageWidth) / 90;
 
-  const imageRows = Math.max(
-    Math.floor((sidePanelHeight.value - 520) / imageHeight),
-    2,
+  const imageRows = Math.min(
+    Math.max(Math.floor((sidePanelHeight.value - 520) / imageHeight), 2),
+    4,
   );
 
+  const maxWidth = Math.ceil(styleList.length / imageRows);
+
   const editorEngine = useContext(EngineContext);
 
   const handlePickingStylizer = (picked: ArtStyle) => {
@@ -91,7 +93,7 @@ export const StyleSelection = () => {
               </div>
             </div>
           )}
-          {scrollPosition < styleList.length / 2 - shownImageCount && (
+          {scrollPosition < maxWidth - shownImageCount && (
             <div className="pointer-events-none absolute right-[-32px] top-0 h-full w-12">
               <div className="flex h-full w-full items-center justify-end pr-6">
                 <ButtonIcon
@@ -100,7 +102,7 @@ export const StyleSelection = () => {
                     setScrollPosition(
                       Math.min(
                         scrollPosition + Math.max(shownImageCount - 1, 1),
-                        styleList.length - 3,
+                        maxWidth - shownImageCount,
                       ),
                     )
                   }