feat: Increased the width and height of toolbar buttons, b=no-bug, c=common, workspaces

src/zen/common/styles/zen-single-components.css

@@ -177,15 +177,16 @@ body > #confetti {
   #zen-sidebar-foot-buttons & {
     --tab-border-radius: 6px;
     --toolbarbutton-border-radius: var(--tab-border-radius);
-    --toolbarbutton-inner-padding: 5px;
+    --toolbarbutton-inner-padding: 6px;
     --toolbarbutton-outer-padding: 2px;
   }
 
   transition:
     background-color 0.1s,
-    scale 0.2s;
-  &:active {
-    transform: scale(0.98);
+    transform 0.2s;
+
+  &:active:hover {
+    transform: scale(0.95);
   }
 }
 

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -99,7 +99,7 @@
 
     #createWorkspaceIcon(workspace) {
       const button = document.createXULElement('toolbarbutton');
-      button.setAttribute('class', 'subviewbutton');
+      button.setAttribute('class', 'subviewbutton toolbarbutton-1');
       button.setAttribute('tooltiptext', workspace.name);
       button.setAttribute('zen-workspace-id', workspace.uuid);
       button.setAttribute('context', 'zenWorkspaceMoreActions');

src/zen/workspaces/ZenWorkspaces.mjs

@@ -3018,7 +3018,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
       parent.removeAttribute('icons-overflow');
       return;
     }
-    const maxButtonSize = 26; // IMPORTANT: This should match the CSS size of the icons
+    const maxButtonSize = 28; // IMPORTANT: This should match the CSS size of the icons
     const minButtonSize = 15;
     const separation = 3; // Space between icons
 

src/zen/workspaces/zen-workspaces.css

@@ -33,8 +33,8 @@
 
   & toolbarbutton {
     margin: 0;
-    max-width: 26px;
-    height: 26px;
+    max-width: 28px;
+    height: 28px;
     display: flex;
     justify-content: center;
     padding: 0 !important;
@@ -63,7 +63,8 @@
     transition:
       filter 0.2s,
       opacity 0.2s,
-      width 0.1s;
+      width 0.1s,
+      transform 0.2s;
 
     &[active='true'],
     &:hover,