From 43de5c69e95797faa00879b5e892be3b092c8fa3 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Mon, 8 Dec 2025 18:06:58 +0100
Subject: [PATCH] fix: Fixed minor aligment and coloring issues, b=no-bug,
 c=tabs, workspaces

---
 .../content/zen-panels/gradient-generator.inc |  6 ++--
 src/zen/tabs/zen-tabs/vertical-tabs.css       | 29 ++++++++++++-------
 src/zen/workspaces/ZenGradientGenerator.mjs   |  4 +--
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/browser/base/content/zen-panels/gradient-generator.inc b/src/browser/base/content/zen-panels/gradient-generator.inc
index 6bc5830d2..6360ff8ca 100644
--- a/src/browser/base/content/zen-panels/gradient-generator.inc
+++ b/src/browser/base/content/zen-panels/gradient-generator.inc
@@ -120,11 +120,13 @@
                 </defs>
               </svg>
             </box>
-            <html:input type="range" max="0.9" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity"
+            <html:input type="range" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity"
 #ifdef XP_MACOSX
-              min="0.25"
+              min="0.15"
+              max="0.8"
 #else
               min="0.35"
+              max="0.9"
 #endif
               />
           </vbox>
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 20bcccefc..2c4a548b2 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -131,7 +131,6 @@
    ========================================================================== */
 .pinned-tabs-container-separator {
   height: 22px;
-  padding-bottom: 2px;
   border: none;
   width: 100%;
   transition:
@@ -142,6 +141,7 @@
   position: relative;
   opacity: 1;
   align-items: center;
+  padding: 0 5px;
 
   & toolbarseparator {
     height: 1px;
@@ -488,7 +488,6 @@
 #navigator-toolbox[zen-sidebar-expanded='true'] {
   --zen-toolbox-min-width: fit-content;
 
-  --tab-icon-end-margin: 8.5px;
   padding: var(--zen-toolbox-padding);
   padding-left: 0;
   padding-top: 0;
@@ -545,7 +544,7 @@
   }
 
   & #zen-essentials {
-    --tab-min-height: 44px;
+    --tab-min-height: 48px;
   }
 
   &[zen-right-side='true'] {
@@ -566,8 +565,8 @@
     & #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
       width: 100% !important;
       border-radius: var(--border-radius-medium) !important;
-      padding-left: var(--toolbarbutton-inner-padding) !important;
-      padding-right: var(--toolbarbutton-inner-padding) !important;
+      padding-left: var(--tab-inline-padding) !important;
+      padding-right: var(--tab-inline-padding) !important;
 
       & label {
         display: flex;
@@ -600,6 +599,7 @@
 
   & #tabbrowser-tabs {
     --tab-inline-padding: 8px;
+    --tab-icon-end-margin: 8.5px;
 
     & .tabbrowser-tab {
       & .tab-label-container {
@@ -667,8 +667,8 @@
       .tab-icon-image,
       .tab-sharing-icon-overlay,
       .tab-icon-overlay {
-        margin-inline-end: var(--toolbarbutton-inner-padding) !important;
-        margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 4) !important;
+        margin-inline-end: calc(var(--toolbarbutton-inner-padding) * 1.5) !important;
+        margin-inline-start: calc(var(--toolbarbutton-inner-padding) / 2) !important;
       }
     }
   }
@@ -1110,14 +1110,22 @@
     max-height 0.3s ease-out,
     grid-template-columns 0.3s ease-out;
   opacity: 1;
-  grid-template-columns: repeat(auto-fit, minmax(max(23.7%, 48px), 1fr));
+  --min-essentials-width-wrap: calc(var(--tab-min-height) + 4px);
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(23.7%, var(--min-essentials-width-wrap)), 1fr)
+  );
   &[data-hack-type='1'] {
-    grid-template-columns: repeat(auto-fit, minmax(max(30%, 48px), auto));
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(30%, var(--min-essentials-width-wrap)), auto)
+    );
   }
   &[data-hack-type='2'] {
     grid-template-columns: repeat(
       auto-fit,
-      minmax(max(23%, 48px), 1fr) minmax(max(23%, 48px), 1fr)
+      minmax(max(23%, var(--min-essentials-width-wrap)), 1fr)
+        minmax(max(23%, var(--min-essentials-width-wrap)), 1fr)
     );
   }
   &[data-hack-type='3'] {
@@ -1160,7 +1168,6 @@
 
   & .tab-background {
     border-radius: var(--border-radius-medium) !important;
-    transition: background 0.1s ease-in-out;
   }
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index ac5aaf517..4866d12a5 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -41,8 +41,8 @@ function parseSinePath(pathStr) {
   return points;
 }
 
-const MAX_OPACITY = 0.9;
-const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.25 : 0.35;
+const MAX_OPACITY = AppConstants.platform === 'macosx' ? 0.8 : 0.9;
+const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.15 : 0.35;
 
 const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness';
 const EXPLICIT_BLACKWHITE_TYPE = 'explicit-black-white';