diff --git a/packages/web-svelte/public/dimensions.css b/packages/web-svelte/public/dimensions.css
index 6463d3ec5..4eda591cd 100644
--- a/packages/web-svelte/public/dimensions.css
+++ b/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;
 }
diff --git a/packages/web-svelte/src/Screen.svelte b/packages/web-svelte/src/Screen.svelte
index 141ea6250..7591e4df7 100644
--- a/packages/web-svelte/src/Screen.svelte
+++ b/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;
   }
diff --git a/packages/web-svelte/src/stores.ts b/packages/web-svelte/src/stores.ts
index 6d7a9f4d5..a5496a723 100644
--- a/packages/web-svelte/src/stores.ts
+++ b/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);