From ff9be53b4b892313a6d86005f6936e177482dd32 Mon Sep 17 00:00:00 2001
From: Paul Knight <nickmc01@gmail.com>
Date: Sat, 7 Dec 2024 22:10:07 -0500
Subject: [PATCH] Adjustments to support floating side panels and fixes for
 panel gaps

---
 packages/theme/styles/_colors.scss                         | 2 +-
 packages/theme/styles/common.scss                          | 7 ++++---
 packages/theme/styles/components.scss                      | 3 +--
 plugins/time-resources/src/components/PlanView.svelte      | 1 -
 .../time-resources/src/components/PlanningCalendar.svelte  | 2 +-
 .../workbench-resources/src/components/Workbench.svelte    | 7 ++-----
 6 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index b3fa8b995c7..19e4f1cf8d4 100644
--- a/packages/theme/styles/_colors.scss
+++ b/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;
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index c34e33730b6..fc46e94b509 100644
--- a/packages/theme/styles/common.scss
+++ b/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);
   }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 9a308d77826..f7790fd43e9 100644
--- a/packages/theme/styles/components.scss
+++ b/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;
diff --git a/plugins/time-resources/src/components/PlanView.svelte b/plugins/time-resources/src/components/PlanView.svelte
index fbc914563a1..05bed7cc776 100644
--- a/plugins/time-resources/src/components/PlanView.svelte
+++ b/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;
diff --git a/plugins/time-resources/src/components/PlanningCalendar.svelte b/plugins/time-resources/src/components/PlanningCalendar.svelte
index 3a03fd7e1b1..77f222b447b 100644
--- a/plugins/time-resources/src/components/PlanningCalendar.svelte
+++ b/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
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 61e63caf256..f29abeb7ee5 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/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 {