Adjustments to support floating side panels and fixes for panel gaps

Author: logicsec

packages/theme/styles/_colors.scss

@@ -124,7 +124,7 @@
   --theme-refinput-border: rgba(255, 255, 255, .1);
 
   // Be aware to update defineAlpha() function in colors.ts
-  --theme-bg-color: #1A1A28;
+  --theme-bg-color: #14141f;
   --theme-bg-accent-color: rgba(0, 0, 0, .08);
   --theme-bg-dark-color: rgba(0, 0, 0, .2);
   --theme-back-color: #0f0f18;

packages/theme/styles/common.scss

@@ -113,8 +113,9 @@
     flex-direction: column;
     min-width: var(--app-panel-width);
     width: var(--app-panel-width);
-    height: 100%;
-    border-right: 1px solid var(--theme-navpanel-divider);
+    margin: var(--spacing-1);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: var(--medium-BorderRadius) !important;
   }
   &.horizonatl {
     min-height: var(--app-panel-width);
@@ -143,7 +144,7 @@
 
   &:not(.second) { 
     background-color: var(--theme-workbench-color); 
-    margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);  // Changed from all sides to top, bottom, left only
+    margin-right: var(--spacing-2);
     border: 1px solid var(--theme-divider-color);
     border-radius: var(--small-focus-BorderRadius);
   }

packages/theme/styles/components.scss

@@ -20,18 +20,17 @@
   flex-grow: 1;
   min-height: 0;
   min-width: 0;
-  margin: var(--spacing-2);
   border: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor);
   border-radius: var(--small-focus-BorderRadius);
   padding: var(--spacing-2);
 
   &:not(.modal) {
     background-color: var(--theme-panel-color); // var(--global-surface-02-BackgroundColor);
-    margin: var(--spacing-2);
   }
   &.modal {
     overflow: hidden;
     background-color: var(--theme-comp-header-color); // var(--global-surface-02-BackgroundColor);
+    margin-left: var(--spacing-2);
   }
   &.beforeAside {
     border-right: none;

plugins/time-resources/src/components/PlanView.svelte

@@ -112,7 +112,6 @@
     flex-direction: column;
     flex-grow: 1;
     background-color: var(--theme-workbench-color);
-    margin: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
     border: 1px solid var(--theme-divider-color);
     border-radius: var(--small-focus-BorderRadius);
     min-width: 320px;

plugins/time-resources/src/components/PlanningCalendar.svelte

@@ -175,7 +175,7 @@
 </script>
 
 <div
-  class="hulyComponent modal"
+  class="hulyComponent modal margin-left-2"
   bind:this={element}
   use:resizeObserver={(element) => {
     showLabel = showLabel ? element.clientWidth > rem(3.5) + 399 : element.clientWidth > rem(3.5) + 400

plugins/workbench-resources/src/components/Workbench.svelte

@@ -1096,23 +1096,20 @@
     min-width: 0;
     min-height: 0;
     width: 100%;
-    height: 100%;
-    background-color: var(--theme-panel-color);
     touch-action: none;
+    margin: var(--spacing-1);
 
     &.inner {
       background-color: var(--theme-navpanel-color);
 
       &.rounded {
-        border-radius: 0 var(--medium-BorderRadius) var(--medium-BorderRadius) 0;
+        border-radius: var(--medium-BorderRadius);
       }
     }
     &:not(.inner)::after {
       position: absolute;
       content: '';
       inset: 0;
-      border: 1px solid var(--theme-divider-color);
-      border-radius: var(--medium-BorderRadius);
       pointer-events: none;
     }
     .antiPanel-application.horizontal {