From 5ea90154b1a2c5c2ab61d8cd06feaaafe38486d7 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 22 Apr 2025 01:29:51 +0700
Subject: [PATCH] bug fix: selecting object in scene crashes (Headless UI
 Transition component bug)

---
 .../apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx   | 2 +-
 .../ControlPanelSceneObject/ControlPanelSceneObject.tsx     | 6 ++++--
 .../app/src/pages/PageEnigma/comps/Outliner/Outliner.tsx    | 1 +
 .../app/src/pages/PageEnigma/comps/PoseModeSelector.tsx     | 6 +-----
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
index 0e556c67d1..6b7821a9d1 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx
@@ -120,7 +120,7 @@ export const PageEditor = () => {
               onClick={handleOverlayClick}
             >
               <div
-                className="absolute bottom-0 mb-2 ml-2 flex origin-bottom-left flex-col gap-2"
+                className="absolute bottom-0 mb-4 ml-4 flex origin-bottom-left flex-col gap-2"
                 style={{ transform: `scale(${getScale()})` }}
               >
                 <Outliner />
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 2a9fc613a7..3bdf6b9415 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -155,7 +155,7 @@ export const ControlPanelSceneObject = () => {
     updatedScaleValues.z = (parseFloat(localScale.z) + scale).toString();
 
     handleScaleChange(updatedScaleValues);
-  }
+  };
 
   const handleScaleChange = (xyz: Record<string, string>) => {
     if (isInvalid(xyz)) {
@@ -180,9 +180,10 @@ export const ControlPanelSceneObject = () => {
 
   return (
     <Transition
+      as="div"
       show={isShowing.value}
       className={twMerge(
-        "glass absolute bottom-0 right-0 mb-2 mr-2 flex h-fit w-56 origin-bottom-right flex-col gap-2 rounded-lg border border-ui-panel-border p-3.5 text-white shadow-lg",
+        "glass absolute bottom-0 right-0 mb-4 mr-4 flex h-fit w-56 origin-bottom-right flex-col gap-2 rounded-lg border border-ui-panel-border p-3.5 text-white shadow-lg",
       )}
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
@@ -208,6 +209,7 @@ export const ControlPanelSceneObject = () => {
       </div>
 
       <Transition
+        as="div"
         show={!isCollapsed}
         enter="transition-all duration-200 ease-in-out"
         enterFrom="opacity-0 max-h-0"
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Outliner/Outliner.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Outliner/Outliner.tsx
index 93110ba77f..56011289f4 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Outliner/Outliner.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Outliner/Outliner.tsx
@@ -179,6 +179,7 @@ export const Outliner = () => {
 
   return (
     <Transition
+      as="div"
       show={outlinerIsShowing.value}
       className={twMerge(
         "glass flex max-h-[34vh] w-[240px] origin-bottom-left flex-col overflow-hidden rounded-lg shadow-lg",
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx
index 527b6b3edc..dbcd3564fb 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx
@@ -2,11 +2,7 @@ import React from "react";
 import { useSignals } from "@preact/signals-react/runtime";
 import { poseMode, showPoseControls } from "../signals/selectedMode";
 import { Button, Tooltip } from "~/components";
-import {
-  faCheck,
-  faCheckDouble,
-  faPersonRunning,
-} from "@fortawesome/pro-solid-svg-icons";
+import { faCheck, faPersonRunning } from "@fortawesome/pro-solid-svg-icons";
 
 declare global {
   interface Window {