Merge remote-tracking branch 'origin/main-demo-ui' into main-dev

app/src/components/SimulationDashboard/components/block/BlockEditor.tsx

@@ -46,6 +46,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
     const { editorPosition, setEditorPosition } = useVisualizationStore();
     const panelRef = useRef<HTMLDivElement | null>(null);
     const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
+    const [panelWidth, setPanelWidth] = useState<number>(300);
     const draggingRef = useRef(false);
     const startXRef = useRef(0);
     const startYRef = useRef(0);
@@ -107,7 +108,8 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
     useEffect(() => {
         if (!editorPosition) {
             const { width } = getPanelDimensions();
-            const defaultX = Math.max(0, window.innerWidth - width - 40);
+            setPanelWidth(width || 300);
+            const defaultX = Math.max(0, window.innerWidth - (width || 300) - 40);
             const defaultY = 80;
 
             setPositionFromPixels(defaultX, defaultY);
@@ -115,6 +117,9 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
                 xPercent: (defaultX / window.innerWidth) * 100,
                 yPercent: (defaultY / window.innerHeight) * 100,
             };
+        } else {
+            const { width } = getPanelDimensions();
+            setPanelWidth(width || 300);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -218,7 +223,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
                 }
             }}
             className="panel block-editor-panel"
-            style={{ position: "fixed", left: position.x, top: position.y, zIndex: 999 }}
+            style={{ position: "fixed", left: position.x, top: position.y, zIndex: 999, width: panelWidth }}
         >
             <div className={`free-move-button`} onDoubleClick={resetPosition} onPointerDown={startDrag}>
                 <ResizeHeightIcon />

app/src/components/SimulationDashboard/components/element/ElementEditor.tsx

@@ -64,6 +64,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     const { editorPosition, setEditorPosition } = useVisualizationStore();
     const panelRef = useRef<HTMLDivElement | null>(null);
     const initialPositionRef = useRef<{ xPercent: number; yPercent: number } | null>(null);
+    const [panelWidth, setPanelWidth] = useState<number>(300);
 
     const draggingRef = useRef(false);
     const startXRef = useRef(0);
@@ -124,7 +125,8 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     useEffect(() => {
         if (!editorPosition) {
             const { width } = getPanelDimensions();
-            const defaultX = Math.max(0, window.innerWidth - width - 40);
+            setPanelWidth(width || 300);
+            const defaultX = Math.max(0, window.innerWidth - (width || 300) - 40);
             const defaultY = 80;
 
             setPositionFromPixels(defaultX, defaultY);
@@ -132,6 +134,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                 xPercent: (defaultX / window.innerWidth) * 100,
                 yPercent: (defaultY / window.innerHeight) * 100,
             };
+        } else {
+            // ensure we capture current width when editorPosition exists
+            const { width } = getPanelDimensions();
+            setPanelWidth(width || 300);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -518,7 +524,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                 }
             }}
             className="panel element-editor-panel"
-            style={{ position: "fixed", left: position.x, top: position.y, zIndex: 1000 }}
+                style={{ position: "fixed", left: position.x, top: position.y, zIndex: 1000, width: panelWidth }}
         >
             <div className="free-move-button" onPointerDown={startDrag} onDoubleClick={resetPosition}>
                 <ResizeHeightIcon />

app/src/styles/components/_input.scss

@@ -226,9 +226,7 @@ input[type="number"] {
   position: relative;
   cursor: pointer;
 
-  .key {
+  /* key default styles removed to allow dropdown header to control ellipsis */
-    text-overflow: none;
-  }
 
   .dropdown-header {
     height: 100%;
@@ -241,6 +239,7 @@ input[type="number"] {
       width: calc(100% - 18px);
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
@@ -268,20 +267,21 @@ input[type="number"] {
     margin-bottom: 4px;
   }
 
-  .option {
+    .option {
-    padding: 6px 6px;
+      padding: 6px 6px;
-    cursor: pointer;
+      cursor: pointer;
-    flex-direction: row !important;
+      flex-direction: row !important;
-    border-radius: #{$border-radius-medium};
+      border-radius: #{$border-radius-medium};
-    width: 100%;
+      width: 100%;
-    overflow: hidden;
+      overflow: hidden;
-    text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 
-    &:hover {
+      &:hover {
-      color: var(--highlight-text-color);
+        color: var(--highlight-text-color);
-      background: var(--highlight-accent-color);
+        background: var(--highlight-accent-color);
+      }
     }
-  }
 }
 
 .input.default {