From 9ec4685bf36d4b046e610017ce0a6b5bf311c6db Mon Sep 17 00:00:00 2001
From: Maksim Kostromin <daggerok@gmail.com>
Date: Thu, 8 Oct 2026 02:07:37 -0400
Subject: [PATCH] fix(app): center the detail tabs and list as many selected
 tickers as fit before them

---
 src/index.html |  2 +-
 src/main.tsx   | 50 ++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/index.html b/src/index.html
index cd41a358..ace16039 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
 
       <div id="top-panels" class="max-lg:contents lg:sticky lg:top-0 lg:z-40 lg:space-y-6 lg:pt-8 lg:bg-slate-50 lg:dark:bg-slate-900">
         <!-- Top panel: brand, detail tabs, ETF count and theme (was the page header). Sticky on every width. -->
-        <nav id="selected-tabs-panel" class="bg-white dark:bg-slate-800/80 max-lg:dark:bg-slate-800 px-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-xs backdrop-blur-sm flex flex-wrap items-center gap-x-3 gap-y-2 lg:grid lg:grid-cols-[minmax(11rem,1.5fr)_minmax(0,auto)_minmax(min-content,1fr)] max-lg:sticky max-lg:top-0 max-lg:z-40 max-lg:mb-6" aria-label="Selected ETF detail views">
+        <nav id="selected-tabs-panel" class="bg-white dark:bg-slate-800/80 max-lg:dark:bg-slate-800 px-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-xs backdrop-blur-sm flex flex-wrap items-center gap-x-3 gap-y-2 lg:grid lg:grid-cols-[minmax(11rem,1fr)_minmax(0,auto)_minmax(min-content,1fr)] max-lg:sticky max-lg:top-0 max-lg:z-40 max-lg:mb-6" aria-label="Selected ETF detail views">
           <div class="order-1 lg:min-w-0 flex flex-1 flex-wrap sm:flex-nowrap items-center gap-x-3 gap-y-1.5 min-w-0">
             <div class="flex items-start gap-3 min-w-0 sm:shrink-0">
               <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/main.tsx b/src/main.tsx
index 26ec37cc..1dbaee79 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3142,7 +3142,9 @@ function renderDistributionsTable(fund: FundRow): void {
 // 7. Subtitle
 // =========================================================================
 
-const SUBTITLE_TICKER_CAP = 1;
+const SUBTITLE_TICKER_CAP = 12; // upper bound, the real number is what fits before the tabs
+let subtitleRefit: (() => void) | null = null;
+let subtitleObserved = false;
 
 function renderHeaderSummary(subtitle: HTMLElement, tickers: Iterable<string>, activeTicker: string | null, activate: (ticker: string) => void): void {
   const panel = document.getElementById('app-summary');
@@ -3152,19 +3154,39 @@ function renderHeaderSummary(subtitle: HTMLElement, tickers: Iterable<string>, a
   subtitle.replaceChildren();
   const selected = [...tickers].sort();
   if (!selected.length) return;
-  subtitle.append(document.createTextNode(`${selected.length} selected: `));
-  selected.slice(0, SUBTITLE_TICKER_CAP).forEach((ticker, index) => {
-    if (index) subtitle.append(document.createTextNode(', '));
-    const link = document.createElement('a');
-    link.href = '#';
-    link.dataset.headerFund = ticker;
-    link.title = `View ${ticker} details`;
-    link.className = `font-semibold ${ticker === activeTicker ? 'text-blue-700 dark:text-blue-300 underline' : 'text-blue-600 dark:text-blue-400 hover:underline'}`;
-    link.textContent = ticker;
-    link.addEventListener('click', event => { event.preventDefault(); activate(ticker); });
-    subtitle.append(link);
-  });
-  if (selected.length > SUBTITLE_TICKER_CAP) subtitle.append(document.createTextNode(` and ${selected.length - SUBTITLE_TICKER_CAP} more`));
+  const paint = (count: number): void => {
+    subtitle.replaceChildren();
+    subtitle.append(document.createTextNode(`${selected.length} selected: `));
+    selected.slice(0, count).forEach((ticker, index) => {
+      if (index) subtitle.append(document.createTextNode(', '));
+      const link = document.createElement('a');
+      link.href = '#';
+      link.dataset.headerFund = ticker;
+      link.title = `View ${ticker} details`;
+      link.className = `font-semibold ${ticker === activeTicker ? 'text-blue-700 dark:text-blue-300 underline' : 'text-blue-600 dark:text-blue-400 hover:underline'}`;
+      link.textContent = ticker;
+      link.addEventListener('click', event => { event.preventDefault(); activate(ticker); });
+      subtitle.append(link);
+    });
+    if (selected.length > count) subtitle.append(document.createTextNode(` and ${selected.length - count} more`));
+  };
+  // as many tickers as fit on the title row before the tabs (the line never wraps, see the ellipsis in index.html)
+  subtitleRefit = () => {
+    let count = Math.min(selected.length, SUBTITLE_TICKER_CAP);
+    paint(count);
+    if (!subtitle.clientWidth) return;
+    while (count > 1 && subtitle.scrollWidth > subtitle.clientWidth) {
+      count -= 1;
+      paint(count);
+    }
+    // not even one ticker fits: only the count, never a cut-off word
+    if (subtitle.scrollWidth > subtitle.clientWidth) subtitle.replaceChildren(document.createTextNode(selected.length + ' selected'));
+  };
+  subtitleRefit();
+  if (!subtitleObserved && typeof ResizeObserver === 'function') {
+    subtitleObserved = true;
+    new ResizeObserver(() => { if (subtitleRefit) subtitleRefit(); }).observe(subtitle);
+  }
 }
 
 function renderSubtitleDetails(text?: string): void {