Refactor CSS styles for improved layout and responsiveness

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -1,4 +1,4 @@
-#browser,
+
 #tabbrowser-tabpanels {
   background: transparent !important;
 }

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -55,7 +55,7 @@
         padding: var(--zen-toolbox-padding) !important;
         position: relative;
         background: var(--zen-dialog-background);
-        border: 1px solid var(--zen-colors-border);
+        outline: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
 
         @media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
           --zen-themed-toolbar-bg-transparency: 1 !important;

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -751,6 +751,7 @@
 #zen-essentials-container {
   padding-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
+  gap: 1px;
 }
 
 #zen-essentials-container {

src/browser/base/content/zen-styles/zen-workspaces.css

@@ -413,8 +413,8 @@
   margin: calc(var(--zen-toolbox-padding) * 4) calc(4px + var(--tab-inline-padding)) calc(var(--zen-toolbox-padding) * 3);
   font-weight: 600;
   align-items: center;
-  max-width: 100%;
   position: relative;
+  max-width: 140px;
 
   & #zen-current-workspace-indicator-icon {
     font-size: 14px;
@@ -425,9 +425,9 @@
     opacity: 0.5;
 
     overflow: hidden;
-    text-wrap: nowrap;
+    white-space: nowrap;
     text-overflow: ellipsis;
-    max-width: 100%;
+    display: block;
   }
 
   & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {