feat: Customizable essentials tab amount per row

src/browser/app/profile/features.inc

@@ -1,4 +1,3 @@
-
 pref('zen.welcome-screen.seen', false, sticky);
 
 pref('zen.tabs.vertical', true);
@@ -125,6 +124,7 @@ pref('zen.workspaces.natural-scroll', false);
 pref('zen.workspaces.scroll-modifier-key','ctrl'); // can be ctrl, alt, shift, or a meta key
 pref('services.sync.engine.workspaces', false);
 pref('zen.workspaces.container-specific-essentials-enabled', false);
+pref('zen.essentials.per-row', 0); // 0 = auto (responsive), n = fixed number per row
 
 #ifdef MOZILLA_OFFICIAL
 pref('zen.workspaces.debug', false);

src/browser/components/preferences/zen-settings.js

@@ -1222,6 +1222,11 @@ Preferences.addAll([
     type: 'bool',
     default: true,
   },
+  {
+    id: 'zen.essentials.per-row',
+    type: 'int',
+    default: 0,
+  },
   {
     id: 'media.videocontrols.picture-in-picture.enabled',
     type: 'bool',

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -39,6 +39,24 @@
                 data-l10n-id="zen-vertical-tabs-newtab-top-button-up"
                 preference="zen.view.show-newtab-button-top"/>
     </vbox>
+
+    <label><html:h2 data-l10n-id="zen-essentials-header"/></label>
+    <description class="description-deemphasized" data-l10n-id="zen-essentials-description" />
+
+    <hbox align="center">
+        <label data-l10n-id="zen-essentials-per-row-label"/>
+        <menulist preference="zen.essentials.per-row">
+            <menupopup>
+                <menuitem data-l10n-id="zen-essentials-per-row-auto" value="0"/>
+                <menuitem data-l10n-id="zen-essentials-per-row-1" value="1"/>
+                <menuitem data-l10n-id="zen-essentials-per-row-2" value="2"/>
+                <menuitem data-l10n-id="zen-essentials-per-row-3" value="3"/>
+                <menuitem data-l10n-id="zen-essentials-per-row-4" value="4"/>
+                <menuitem data-l10n-id="zen-essentials-per-row-5" value="5"/>
+                <menuitem data-l10n-id="zen-essentials-per-row-6" value="6"/>
+            </menupopup>
+        </menulist>
+    </hbox>
 </groupbox>
 
 <hbox id="zenLooksCategory"

src/zen/common/zenThemeModifier.js

@@ -14,6 +14,7 @@ const kZenThemePrefsList = [
   'zen.theme.accent-color',
   'zen.theme.border-radius',
   'zen.theme.content-element-separation',
+  'zen.essentials.per-row',
 ];
 const kZenMaxElementSeparation = 12;
 
@@ -65,6 +66,7 @@ var ZenThemeModifier = {
     this.updateAccentColor();
     this.updateBorderRadius();
     this.updateElementSeparation();
+    this.updateEssentialsPerRow();
   },
 
   updateBorderRadius() {
@@ -89,6 +91,11 @@ var ZenThemeModifier = {
     );
   },
 
+  updateEssentialsPerRow() {
+    const perRow = Services.prefs.getIntPref('zen.essentials.per-row', 0);
+    document.documentElement.style.setProperty('--zen-essentials-per-row', perRow);
+  },
+
   /**
    * Update the accent color.
    */

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1266,7 +1266,35 @@
     max-height 0.3s ease-out,
     grid-template-columns 0.3s ease-out;
   opacity: 1;
+
+  /* Default auto-fit layout (preference = 0 or not set) */
   grid-template-columns: repeat(auto-fit, minmax(max(23.7%, 48px), 1fr));
+
+  /* Override grid layout when specific per-row values are set */
+  :root[style*='--zen-essentials-per-row: 1'] & {
+    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !important;
+  }
+
+  :root[style*='--zen-essentials-per-row: 2'] & {
+    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2px), 1fr)) !important;
+  }
+
+  :root[style*='--zen-essentials-per-row: 3'] & {
+    grid-template-columns: repeat(auto-fit, minmax(calc(33.33% - 2.67px), 1fr)) !important;
+  }
+
+  :root[style*='--zen-essentials-per-row: 4'] & {
+    grid-template-columns: repeat(auto-fit, minmax(calc(25% - 3px), 1fr)) !important;
+  }
+
+  :root[style*='--zen-essentials-per-row: 5'] & {
+    grid-template-columns: repeat(auto-fit, minmax(calc(20% - 3.2px), 1fr)) !important;
+  }
+
+  :root[style*='--zen-essentials-per-row: 6'] & {
+    grid-template-columns: repeat(auto-fit, minmax(calc(16.67% - 3.33px), 1fr)) !important;
+  }
+
   &[data-hack-type='1'] {
     grid-template-columns: repeat(auto-fit, minmax(max(30%, 48px), auto));
   }