Refactor CSS for vertical tabs and URL bar to improve layout and responsiveness

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

@@ -373,6 +373,8 @@
   overflow-y: auto;
   height: 100%;
   scrollbar-width: thin;
+  margin-left: calc(-1 * var(--zen-toolbox-padding));
+  width: calc(100% + var(--zen-toolbox-padding) * 2);
 }
 
 #zen-browser-tabs-container {
@@ -439,7 +441,7 @@
     padding-right: 0;
 
     :root[zen-single-toolbar='true'] & {
-      & #urlbar:not([breakout-extend='true']) .urlbar-input-container {
+      & #urlbar:not([breakout-extend='true']):not([pageproxystate='invalid']) .urlbar-input-container {
         padding-left: 8px;
         padding-right: 4px;
       }
@@ -1260,5 +1262,9 @@
 .zen-workspace-tabs-section {
   position: absolute;
   transform: translateX(-100%);
-  min-width: 100%;
+  min-width: calc(100% - var(--zen-toolbox-padding) * 2);
+
+  &:not(.zen-current-workspace-indicator) {
+    margin: 0 var(--zen-toolbox-padding);
+  }
 }

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

@@ -80,7 +80,7 @@
   position: relative;
 }
 
-#urlbar:not([breakout-extend='true']) #identity-box:is(:not(.chromeUI), [pageproxystate='invalid']) {
+#urlbar:not([breakout-extend='true']) #identity-box {
   margin-inline-end: 0 !important;
 }
 
@@ -127,11 +127,11 @@
   box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
   border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
   backdrop-filter: none !important;
-  border-radius: 1rem !important;
+  border-radius: 0.8rem !important;
 }
 
 #urlbar-go-button {
-  margin: auto 0;
+  display: none;
 }
 
 :root[zen-single-toolbar='true'] {
@@ -142,11 +142,11 @@
     display: none;
   }
 
-  #identity-icon-box:not([open]) {
-    margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding)) !important;
+  #identity-box:not([pageproxystate='invalid']) #identity-icon-box:not([open]) {
+    margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
     transform: translateX(100%);
-    opacity: 0;
     transition: all 0.1s ease;
+    opacity: 0;
   }
 
   #identity-permission-box > *:not(#permissions-granted-icon) {
@@ -162,9 +162,9 @@
       #identity-permission-box
     ),
   #urlbar:hover #identity-icon-box {
-    opacity: 1;
+    opacity: 1 !important;
     margin-inline-start: 0 !important;
-    transform: none;
+    transform: none !important;
     display: flex;
     #urlbar:not(:hover) & {
       transition: 0;
@@ -176,7 +176,7 @@
   }
 
   #urlbar:not([open]) {
-    #identity-box {
+    #identity-box:not([pageproxystate='invalid']) {
       order: 9;
     }
   }

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

@@ -452,6 +452,7 @@
 
 /* Mark workspaces indicator */
 #zen-current-workspace-indicator-container {
+  position: relative;
   margin-bottom: var(--zen-workspace-indicator-height);
 }
 
@@ -465,6 +466,7 @@
   align-items: center;
   flex-direction: row !important;
   max-width: 100%;
+  width: 100%;
 
   &::before {
     border-radius: var(--border-radius-medium);

src/browser/themes/shared/urlbar-searchbar-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
-index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..c2e8cb8b37438176db07a47e1e975ae1aea42252 100644
+index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..7919f21f6b0b4df2f197b9c6f0e134ff85d50d0a 100644
 --- a/browser/themes/shared/urlbar-searchbar.css
 +++ b/browser/themes/shared/urlbar-searchbar.css
 @@ -5,7 +5,7 @@
@@ -22,3 +22,14 @@ index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..c2e8cb8b37438176db07a47e1e975ae1
    width: calc(var(--urlbar-width) + 2 * var(--urlbar-margin-inline));
  
    > .urlbar-input-container {
+@@ -583,8 +585,8 @@
+ .urlbar-revert-button,
+ .urlbar-go-button,
+ .search-go-button {
+-  width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+-  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
++  width: calc(var(--urlbar-min-height) + 2px /* border */ - 2 * var(--urlbar-container-padding));
++  height: calc(var(--urlbar-min-height) + 2px /* border */ - 2 * var(--urlbar-container-padding));
+   border-radius: var(--urlbar-icon-border-radius);
+   padding: var(--urlbar-icon-padding);
+   color: inherit;