Improved UI

web/src/SignalTree.tsx

@@ -37,9 +37,10 @@ function saveCustom(signals: Array<{ ds: string; name: string }>) {
 
 interface Props {
   onDragStart?: (sig: SignalRef) => void;
+  width?: number;
 }
 
-export default function SignalTree({ onDragStart }: Props) {
+export default function SignalTree({ onDragStart, width }: Props) {
   const [collapsed, setCollapsed] = useState(false);
   const [groups, setGroups] = useState<DsGroup[]>([]);
   const [customSignals, setCustomSignals] = useState<Array<{ ds: string; name: string }>>(loadCustom);
@@ -211,7 +212,7 @@ export default function SignalTree({ onDragStart }: Props) {
   }
 
   return (
-    <aside class={`panel signal-tree-panel${collapsed ? ' collapsed' : ''}`}>
+    <aside class={`panel signal-tree-panel${collapsed ? ' collapsed' : ''}`} style={!collapsed && width ? `width:${width}px;min-width:${width}px;` : undefined}>
       <div class="panel-header">
         {!collapsed && <span class="panel-title">Signals</span>}
         <button class="icon-btn" onClick={() => setCollapsed(c => !c)} title={collapsed ? 'Expand' : 'Collapse'}>