diff --git a/src/index.css b/src/index.css
index a2bb45d..86a3842 100644
--- a/src/index.css
+++ b/src/index.css
@@ -103,51 +103,60 @@
html.dark .busy-overlay{background:rgba(15,23,42,.7);color:#cbd5e1}
@media (prefers-reduced-motion:reduce){.busy-spinner{animation-duration:2.4s}}
-
/*
- * Horizontally pinned catalog columns (Use + Ticker). Sticky positioning is
- * applied directly to the pinned | / | cells (see .catalog-sticky-col
- * below) -- never to a wrapper nested inside an otherwise-static cell. A
- * sticky element can't move past the bounds of its own containing block; if
- * that block were a static parent cell instead of the cell itself, the pin
- * would silently vanish once the row scrolled past the viewport edge. Verify
- * by actually scrolling all the way to the right, not just by reading this
- * CSS.
+ * Horizontal pinning for the catalog table: the Use checkbox and the
+ * Ticker stay visible while the remaining columns (including the row
+ * number) move horizontally. `position:sticky` is applied directly to the
+ * `th`/`td` — NOT to a nested wrapper. A sticky element can never move
+ * past the bounds of its own containing block, so a sticky *child* inside
+ * a plain `position:static` cell stops being visible the moment that
+ * cell's own (unscrolled) position scrolls past the viewport edge: the pin
+ * silently stops working exactly when it matters most. The same direct-cell
+ * rule pins the Watchlist Ticker column at the left edge.
+ *
+ * The colors are this repo's own Tailwind tokens, pre-blended to solid
+ * values: a sticky cell repaints on top of whatever column has scrolled
+ * behind it, so a translucent fill (this repo's `.selected-row` uses
+ * rgba(30,64,175,.22) in dark mode) would let that column's text show
+ * through. Base #172033 = slate-800/50 over slate-900, hover #1f2a3d =
+ * slate-700/30 over that, selected #19274e = rgba(30,64,175,.22) over
+ * that; light-mode #f8fafc / #eff6ff are already opaque.
*/
- #table-scroll table{min-width:max-content;border-collapse:separate;border-spacing:0;isolation:isolate}
+ #table-scroll table{border-collapse:separate;border-spacing:0;isolation:isolate}
#table-scroll tbody{position:relative;z-index:0}
#table-scroll tbody tr{position:relative;z-index:0}
#table-scroll .catalog-sticky-col{position:sticky;background:#fff;background-clip:padding-box}
#table-scroll thead .catalog-sticky-col{top:0;z-index:30;background:#f8fafc}
#table-scroll tbody .catalog-sticky-col{z-index:20}
#table-scroll .catalog-sticky-use{left:0;width:5rem;min-width:5rem}
- #table-scroll .catalog-sticky-ticker{left:5rem;width:7rem;min-width:7rem;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
- .dark #table-scroll .catalog-sticky-col{background:#162032}
- .dark #table-scroll thead .catalog-sticky-col{background:#0f172a}
- #table-scroll tbody tr:hover .catalog-sticky-col{background:#f8fafc}
- #table-scroll tbody tr.selected-row .catalog-sticky-col{background:#eff6ff}
- .dark #table-scroll tbody tr:hover .catalog-sticky-col{background:#1f2a3c}
- .dark #table-scroll tbody tr.selected-row .catalog-sticky-col{background:#18274e}
-
- /* Horizontally pinned Watchlist Ticker column at the left edge.
- Same opaque-background + z-index discipline as the catalog pins so
- scrolled cells never bleed through while scrolling horizontally. */
+ #table-scroll .catalog-sticky-ticker{left:5rem;width:6rem;min-width:6rem;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
+ /*
+ * Watchlist Ticker: the first data column there holds an exchange ticker
+ * for equities but a CUSIP/ISIN (or, for a few private/crypto positions,
+ * a longer provider code) for bonds and cash, so the pin gets a fixed
+ * width with defensive truncation instead of a ticker-sized column.
+ */
#table-scroll .watchlist-sticky-col{position:sticky;background:#fff;background-clip:padding-box}
#table-scroll thead .watchlist-sticky-col{top:0;z-index:30;background:#f8fafc}
#table-scroll tbody .watchlist-sticky-col{z-index:20}
- #table-scroll .watchlist-sticky-ticker{left:0;min-width:6rem;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
- .dark #table-scroll .watchlist-sticky-col{background:#162032}
- .dark #table-scroll thead .watchlist-sticky-col{background:#0f172a}
- #table-scroll tbody tr:hover .watchlist-sticky-col{background:#f8fafc}
- .dark #table-scroll tbody tr:hover .watchlist-sticky-col{background:#1f2a3c}
+ #table-scroll .watchlist-sticky-ticker{left:0;width:10rem;min-width:10rem;max-width:10rem;overflow:hidden;text-overflow:ellipsis;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
+ .dark #table-scroll .catalog-sticky-col,.dark #table-scroll .watchlist-sticky-col{background:#172033}
+ .dark #table-scroll thead .catalog-sticky-col,.dark #table-scroll thead .watchlist-sticky-col{background:#0f172a}
+ #table-scroll tbody tr:hover .catalog-sticky-col,#table-scroll tbody tr:hover .watchlist-sticky-col{background:#f8fafc}
+ #table-scroll tbody tr.selected-row .catalog-sticky-col{background:#eff6ff}
+ .dark #table-scroll tbody tr:hover .catalog-sticky-col,.dark #table-scroll tbody tr:hover .watchlist-sticky-col{background:#1f2a3d}
+ .dark #table-scroll tbody tr.selected-row .catalog-sticky-col{background:#19274e}
/* Detail navigation expands into place after an ETF is selected. */
main.space-y-6 > #selected-tabs-panel{margin-top:1.5rem;padding-top:1rem;padding-bottom:1rem;border-color:rgb(226 232 240)}
.dark main.space-y-6 > #selected-tabs-panel{border-color:rgb(51 65 85)}
- /* Blacklist manager panel: same smooth expand/collapse contract as the
- detail nav above (max-height is set inline by JS from scrollHeight
- since the chip list, unlike the detail tabs, has no bounded height). */
+ /*
+ * Blacklist manager: same smooth expand/collapse contract as the detail
+ * nav above. Its max-height is set inline by JS from scrollHeight, not by
+ * a fixed rem value, because the chip list (unlike the detail tabs) has no
+ * bounded height.
+ */
main.space-y-6 > #blacklist-panel{max-height:0;margin-top:0;overflow:hidden;opacity:0;transform:translateY(-10px);padding-top:0;padding-bottom:0;border-color:transparent;transition:max-height .32s ease,margin-top .32s ease,padding .32s ease,opacity .22s ease,transform .32s ease,border-color .22s ease}
main.space-y-6 > #blacklist-panel.is-visible{margin-top:1.5rem;padding-top:1rem;padding-bottom:1rem;opacity:1;transform:translateY(0);border-color:rgb(226 232 240)}
.dark main.space-y-6 > #blacklist-panel.is-visible{border-color:rgb(51 65 85)}
@@ -297,3 +306,6 @@
box-shadow: 0 12px 30px rgb(15 23 42 / .2);
}
.dark #app-summary { background: #0f172a; color: #cbd5e1; border-color: #475569; }
+
+/* WisdomTree only: 24 columns must keep their content width (the table scrolls horizontally) */
+#table-scroll table{min-width:max-content}
|