From 9ad90e72983e44af6a3d14978cd67849620ab73e Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Thu, 29 Aug 2024 22:26:01 +0200
Subject: [PATCH] Compact mode now takes element separation into account

---
 .../base/content/zen-styles/zen-compact-mode.css       |  4 ++--
 src/browser/base/content/zen-styles/zen-workspaces.css | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css
index b517be612..0a2e97f78 100644
--- a/src/browser/base/content/zen-styles/zen-compact-mode.css
+++ b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -12,7 +12,7 @@
   #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; }
   
   #navigator-toolbox {
-    --zen-compact-toolbox-margin-single: 15px;
+    --zen-compact-toolbox-margin-single: calc(var(--zen-element-separation) * 2);
     --zen-compact-toolbox-margin: var(--zen-compact-toolbox-margin-single);
     position: absolute;
     display: block;
@@ -125,7 +125,7 @@
     #zen-appcontent-navbar-container {
       --urlbar-height: unset;
       transition: .2s ease-in-out;
-      transform: translateY(calc(-100% + 5px));
+      transform: translateY(calc(-100% + var(--zen-element-separation)));
       opacity: 0;
       position: absolute;
       width: 100%;
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index 61a42b974..b754018a1 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -1,20 +1,24 @@
 
 #zen-workspaces-button {
+  --zen-workspaces-button-vmargin: 0.35rem;
   border: 1px solid var(--zen-colors-border);
   border-radius: 50px;
+  width: calc(var(--zen-sidebar-action-button-width) - 5px) !important;
   height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
-  margin-bottom: .1rem !important;
+  margin-top: var(--zen-workspaces-button-vmargin) !important;
+  margin-bottom: var(--zen-workspaces-button-vmargin) !important;
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
 #zen-workspaces-button .zen-workspace-sidebar-name {
-  margin-left: .1rem;
+  margin-left: .2rem;
   display: none;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 12px;
 }
 
 @media (-moz-bool-pref: "zen.view.sidebar-expanded") {
@@ -43,7 +47,7 @@
       text-overflow: ellipsis;
       display: flex;
       padding: 2px 10px;
-      width: calc(100% - var(--zen-tabbrowser-padding) * 8) !important;
+      width: calc(100% - var(--zen-tabbrowser-padding) * 6) !important;
       gap: 0.5ch;
     }
   }