@startsimpli/ui 0.4.120 → 0.4.122

package/src/lib/scroll-affordance.ts

@@ -20,6 +20,13 @@ export const TABLE_SHELL_CLASS = 'ss-table-shell'
 export const TABLE_EDGE_CLASS = 'ss-table-edge'
 export const TABLE_EDGE_LEFT_CLASS = 'ss-table-edge-left'
 export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
+/**
+ * A second, sticky horizontal scrollbar for the table, pinned to the bottom of
+ * the viewport while the real one is off screen (startsim-xe1uo.1).
+ */
+export const TABLE_RAIL_CLASS = 'ss-table-rail'
+/** The rail's only child: a strut as wide as the table, so the rail overflows. */
+export const TABLE_RAIL_TRACK_CLASS = 'ss-table-rail-track'
 
 /**
  * The edge hint SHADES its surface; it must never try to MATCH it.
@@ -63,6 +70,26 @@ export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
 const EDGE_SHADE = 'hsl(var(--foreground) / 0.14)'
 const EDGE_SHADE_NONE = 'hsl(var(--foreground) / 0)'
 
+/**
+ * The rail's bar is LOUDER than the in-gutter one, on purpose.
+ *
+ * The shared thumb sits in a gutter below the table, on bare surface, and 22%
+ * of `currentColor` is enough to read there. The rail floats OVER the last rows
+ * of the table with a transparent track, so at 22% it competes with row text
+ * and, on the routes this was built for, is the only thing a mouse user can
+ * grab. 45% is the value the shared rule already uses on `:hover`, so this is
+ * the same ink, not a new colour, and it inverts with the theme like the rest.
+ * The faint track makes the rail read as a bar rather than as a stray thumb.
+ *
+ * This does NOT supersede startsim-xe1uo.2, which is about the 10px height the
+ * shared rule takes from the platform's ~15px classic bar on Windows/Linux --
+ * that trade only gets more load-bearing now that the rail is the grab target,
+ * and it wants the runtime overlay/classic probe described on that bead, not a
+ * different alpha.
+ */
+const RAIL_THUMB = 'color-mix(in srgb, currentColor 45%, transparent)'
+const RAIL_TRACK = 'color-mix(in srgb, currentColor 8%, transparent)'
+
 /**
  * Content scrolls, but on macOS nothing says so (startsim-5pq7h, 5pq7h.1).
  *
@@ -130,6 +157,15 @@ const EDGE_SHADE_NONE = 'hsl(var(--foreground) / 0)'
  * Nothing here animates or transitions, so `prefers-reduced-motion` has nothing
  * to honour.
  *
+ * THE BAR BEING VISIBLE IS NOT THE SAME AS THE BAR BEING REACHABLE. The
+ * scroller is as tall as the whole table, so the bar it grows sits at the
+ * BOTTOM OF THE DOCUMENT -- measured 2,741-5,994px below the truncated header
+ * on the marketing-agents tenant (startsim-xe1uo). A macOS trackpad swipes
+ * horizontally anywhere over the table, so nobody here ever noticed; a Windows
+ * wheel mouse has no horizontal axis, so its owner's only options were
+ * Shift+Wheel or a scrollbar three screens down. `.ss-table-rail` is the answer
+ * to that half -- see `useScrollRail` in components/ui/table-scroll.ts.
+ *
  * ONE stylesheet, ONE id, ONE string: `ensureInjectedStyle` rewrites the sheet
  * when an existing id carries different text, so two call sites shipping
  * different CSS under this id would overwrite each other on every mount. Add
@@ -137,6 +173,7 @@ const EDGE_SHADE_NONE = 'hsl(var(--foreground) / 0)'
  */
 export const SCROLL_AFFORDANCE_CSS = `
 .${TABLE_SCROLLER_CLASS}::-webkit-scrollbar,
+.${TABLE_RAIL_CLASS}::-webkit-scrollbar,
 .${SCROLLER_CLASS}::-webkit-scrollbar {
   height: 10px;
   width: 10px;
@@ -146,16 +183,50 @@ export const SCROLL_AFFORDANCE_CSS = `
   background: transparent;
 }
 .${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb,
+.${TABLE_RAIL_CLASS}::-webkit-scrollbar-thumb,
 .${SCROLLER_CLASS}::-webkit-scrollbar-thumb {
   border-radius: 9999px;
   background-color: color-mix(in srgb, currentColor 22%, transparent);
 }
 .${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb:hover,
+.${TABLE_RAIL_CLASS}::-webkit-scrollbar-thumb:hover,
 .${SCROLLER_CLASS}::-webkit-scrollbar-thumb:hover {
   background-color: color-mix(in srgb, currentColor 45%, transparent);
 }
 .${TABLE_SHELL_CLASS} {
   position: relative;
+  /*
+   * min-width and overflow-x do two different jobs here, and the shell used to
+   * get BOTH of them by accident from a single Tailwind overflow-x-auto in
+   * DataTableCore. That class had to go, because a scroll container is a
+   * scrollport and position:sticky inside one resolves against IT, not the
+   * viewport -- which pinned the rail below to the bottom of the TABLE instead
+   * of the bottom of the SCREEN.
+   *
+   * MEASURED 2026-09-09, Chromium, a shell holding a 1600px table inside a
+   * 400px flex line, scrolled so the shell's bottom is 1.4k px below the fold:
+   *
+   *   shell overflow-x     computed overflow-y   shell width   sticky rail bottom
+   *   auto  (what shipped) auto                   400          2022  (off screen)
+   *   hidden               auto                   400          2022  (off screen)
+   *   clip                 visible               1602  <-- blows out the flex line
+   *   clip + min-width:0   visible                400           614  (= viewport)
+   *
+   * So clip is the one overflow value that clips without becoming a scrollport
+   * -- but it does NOT bring the automatic minimum size with it. min-width:auto
+   * resolves to zero only for a SCROLL CONTAINER, and a clip container is not
+   * one, so the shell stopped shrinking and pushed its flex parent to 1602px.
+   * Hence both declarations, and neither is optional: drop min-width and wide
+   * tables blow out their layout, drop clip and the rail never reaches the
+   * viewport.
+   *
+   * hidden first is the fallback for engines without clip (Safari < 16): they
+   * keep today's clipping and today's non-sticky rail, rather than letting the
+   * table escape the shell's rounded border.
+   */
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-x: clip;
 }
 .${TABLE_EDGE_CLASS} {
   position: absolute;
@@ -172,6 +243,22 @@ export const SCROLL_AFFORDANCE_CSS = `
   left: 0;
   background-image: linear-gradient(to right, ${EDGE_SHADE}, ${EDGE_SHADE_NONE});
 }
+.${TABLE_RAIL_CLASS} {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.${TABLE_RAIL_TRACK_CLASS} {
+  height: 1px;
+}
+.${TABLE_RAIL_CLASS}::-webkit-scrollbar-track {
+  background-color: ${RAIL_TRACK};
+}
+.${TABLE_RAIL_CLASS}::-webkit-scrollbar-thumb {
+  background-color: ${RAIL_THUMB};
+}
 `.trim()
 
 /**