Add config for max visible cards

Author: gordonn

prefs/zen/zen.yaml

@@ -65,3 +65,6 @@
 
 - name: zen.tabs.tab-switcher.use-recent-order
   value: false
+
+- name: zen.tabs.tab-switcher.max-visible-cards
+  value: 5

src/zen/tabs/ZenTabSwitcher.mjs

@@ -16,6 +16,7 @@ class nsZenTabSwitcher extends nsZenDOMOperatedFeature {
   #ctrlPressed = false;
   #lazyPrefs = {};
   #recentlyUsedTabs = []; // Track recently used tabs ourselves
+  #actualVisibleCards = 5; // Actual number of cards visible (updated on render)
 
   init() {
     console.log("ZenTabSwitcher: Initializing...");
@@ -410,18 +411,29 @@ class nsZenTabSwitcher extends nsZenDOMOperatedFeature {
 
     const totalTabs = this.#tabList.length;
 
-    // Responsive max visible cards based on viewport width
-    // 5 cards: >1300px, 4 cards: >1050px, 3 cards: >800px, 2 cards: >550px, 1 card: <=550px
-    const maxVisible = this.#getMaxVisibleCards();
-    
-    // Set fixed width to show cards based on viewport size (or fewer if we have fewer tabs)
-    // This creates the viewport that shows the appropriate number of cards
-    const visibleCount = Math.min(totalTabs, maxVisible);
+    // Card dimensions
     const cardWidth = 200; // var(--zen-tab-switcher-card-width)
     const gap = 0; // var(--zen-tab-switcher-gap)
+    const panelPadding = 23 * 2; // var(--zen-tab-switcher-padding) * 2
+    
+    // Calculate maximum available width for cards (90vw minus panel padding)
+    const maxAvailableWidth = window.innerWidth * 0.9 - panelPadding;
+    
+    // Calculate how many full cards can actually fit in the available space
+    const maxCardsThatFit = Math.floor((maxAvailableWidth + gap) / (cardWidth + gap));
+    
+    // Get responsive max based on viewport breakpoints and user preference
+    const maxVisibleFromBreakpoints = this.#getMaxVisibleCards();
 
-    // Calculate container width: 5 cards + 4 gaps (or fewer if less tabs)
+    // Actual visible count is the minimum of: cards that fit, breakpoint max, total tabs
+    const visibleCount = Math.min(totalTabs, maxVisibleFromBreakpoints, maxCardsThatFit);
+    
+    // Calculate container width based on actual visible count
     const containerWidth = (cardWidth * visibleCount) + (gap * (visibleCount - 1));
+    
+    // Store the actual visible count for pagination logic
+    this.#actualVisibleCards = visibleCount;
+    
     this.tabsContainer.style.width = `${containerWidth}px`;
     this.tabsContainer.style.maxWidth = `${containerWidth}px`;
 
@@ -611,24 +623,31 @@ class nsZenTabSwitcher extends nsZenDOMOperatedFeature {
   }
 
   #getMaxVisibleCards() {
-    let maxVisible = 5;
+    // Get user preference for max cards (default 5, clamped to 10)
+    const prefMax = Math.min(10, Math.max(1, 
+      Services.prefs.getIntPref("zen.tabs.tab-switcher.max-visible-cards", 5)
+    ));
+    
+    // Responsive calculation based on viewport width
+    let maxVisible = prefMax;
     const viewportWidth = window.innerWidth;
     if (viewportWidth <= 550) {
       maxVisible = 1;
     } else if (viewportWidth <= 800) {
-      maxVisible = 2;
+      maxVisible = Math.min(2, prefMax);
     } else if (viewportWidth <= 1050) {
-      maxVisible = 3;
+      maxVisible = Math.min(3, prefMax);
     } else if (viewportWidth <= 1300) {
-      maxVisible = 4;
+      maxVisible = Math.min(4, prefMax);
     }
 
     return maxVisible;
   }
 
   #getPageStartIndex(cardIndex) {
     const totalTabs = this.#tabList.length;
-    const maxVisible = this.#getMaxVisibleCards();
+    // Use the actual visible cards from the last render, not the theoretical max
+    const maxVisible = this.#actualVisibleCards;
 
     const currentPage = Math.floor(cardIndex / maxVisible);
     let pageStartIndex = currentPage * maxVisible;

src/zen/tabs/zen-tab-switcher.css

@@ -88,9 +88,11 @@
   overflow-x: hidden; /* No overflow - perfectly symmetrical */
   overflow-y: hidden;
   /* width is set dynamically via JavaScript */
+  max-width: 100%; /* Constrain within panel boundaries */
   scroll-behavior: smooth;
   scrollbar-width: none; /* Hide scrollbar */
   position: relative;
+  box-sizing: border-box;
 }
 
 #zen-tab-switcher-tabs::-webkit-scrollbar {