dim left panel width

packages/web-svelte/public/dimensions.css

@@ -1,4 +1,5 @@
 :root {
   --dim-widget-icon-size: 50px;
   --dim-statusbar-height: 20px;
+  --dim-left-panel-width: 300px;
 }

packages/web-svelte/src/Screen.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import WidgetContainer from './widgets/WidgetContainer.svelte';
   import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
-  import { leftPanelWidth, selectedWidget } from './stores';
+  import { selectedWidget } from './stores';
 </script>
 
 <div class="theme-light">
@@ -10,7 +10,7 @@
   </div>
   <div class="statusbar" />
   {#if $selectedWidget}
-    <div class="leftpanel" style="width: {$leftPanelWidth}px">
+    <div class="leftpanel">
       <WidgetContainer />
     </div>
   {/if}
@@ -38,6 +38,7 @@
     top: 0;
     left: var(--dim-widget-icon-size);
     bottom: var(--dim-statusbar-height);
+    width: var(--dim-left-panel-width);
     background-color: var(--theme-bg-2);
     display: flex;
   }

packages/web-svelte/src/stores.ts

@@ -1,4 +1,4 @@
 import { writable } from 'svelte/store';
 
 export const selectedWidget = writable('database');
-export const leftPanelWidth = writable(300);
+// export const leftPanelWidth = writable(300);