tabs container style refactor

packages/web/public/dimensions.css

@@ -22,7 +22,6 @@
   --dim-header-top: calc(
     var(--dim-titlebar-height) * var(--dim-visible-titlebar) + var(--dim-toolbar-height) * var(--dim-visible-toolbar)
   );
-  --dim-content-top: calc(var(--dim-header-top) + var(--dim-tabs-panel-height));
 
   --dim-large-form-margin: 20px;
 }

packages/web/src/Screen.svelte

@@ -27,6 +27,7 @@
   import TitleBar from './widgets/TitleBar.svelte';
   import FontIcon from './icons/FontIcon.svelte';
   import getElectron from './utility/getElectron';
+  import TabsContainer from './tabpanel/TabsContainer.svelte';
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
@@ -69,11 +70,8 @@
       <WidgetContainer />
     </div>
   {/if}
-  <div class="tabs">
-    <TabsPanel />
-  </div>
-  <div class="content">
-    <TabRegister />
+  <div class="tabs-container">
+    <TabsContainer />
   </div>
   {#if $selectedWidget && $visibleWidgetSideBar}
     <div
@@ -135,23 +133,6 @@
     background-color: var(--theme-bg-1);
     display: flex;
   }
-  .tabs {
-    position: fixed;
-    top: var(--dim-header-top);
-    left: var(--dim-content-left);
-    height: var(--dim-tabs-panel-height);
-    right: 0;
-    background-color: var(--theme-bg-1);
-    border-top: 1px solid var(--theme-border);
-  }
-  .content {
-    position: fixed;
-    top: var(--dim-content-top);
-    left: var(--dim-content-left);
-    bottom: var(--dim-statusbar-height);
-    right: 0;
-    background-color: var(--theme-bg-1);
-  }
   .commads {
     position: fixed;
     top: var(--dim-header-top);
@@ -207,4 +188,13 @@
   .big-icon {
     font-size: 20pt;
   }
+
+  .tabs-container {
+    position: fixed;
+    top: var(--dim-header-top);
+    left: var(--dim-content-left);
+    bottom: var(--dim-statusbar-height);
+    right: 0;
+    background-color: var(--theme-bg-1);
+  }
 </style>

packages/web/src/tabpanel/TabsContainer.svelte

@@ -0,0 +1,32 @@
+<script>
+  import TabRegister from './TabRegister.svelte';
+
+  import TabsPanel from './TabsPanel.svelte';
+</script>
+
+<div class="tabs">
+  <TabsPanel />
+</div>
+<div class="content">
+  <TabRegister />
+</div>
+
+<style>
+  .tabs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: var(--dim-tabs-panel-height);
+    right: 0;
+    background-color: var(--theme-bg-1);
+    border-top: 1px solid var(--theme-border);
+  }
+  .content {
+    position: absolute;
+    top: var(--dim-tabs-panel-height);
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: var(--theme-bg-1);
+  }
+</style>