Better handling of sidepanel width changes

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>

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,
                       ),
                     )
                   }