@sensiblestats/widget-react 0.44.0 → 0.46.0

package/dist/styles.css

@@ -102,6 +102,11 @@
 /* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --
    same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM
    landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */
+/* Children of this scrolling column flex container must NOT shrink. The default flex-shrink:1
+   compresses every child to fit the panel instead of letting the container scroll, and
+   .ss-w-grp's own overflow:hidden then clips the compressed content away entirely — 27
+   competition groups rendered as blank bars on a phone. Applies to the pinned cards too. */
+.ss-w-mon-list > * { flex: none; }
 .ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }
 /* Transient bottom spacer: reserves a viewport of room below a new turn so its
    top can be scrolled into view while the reply is still streaming in. Height is
@@ -730,8 +735,9 @@
 .ss-w-fandash-live-legend-swatch--away { background: var(--ss-w-away); }
 
 /* live monitor tab bar: underline pattern mirrors .ss-w-ecard-scope; the unread dot uses --ss-w-neg */
-.ss-w-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ss-w-line); }
-.ss-w-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
+.ss-w-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ss-w-line); overflow-x: auto; scrollbar-width: none; }
+.ss-w-tabs::-webkit-scrollbar { display: none; }
+.ss-w-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; flex: none; white-space: nowrap; }
 .ss-w-tab[data-on] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
 .ss-w-tab-count { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 999px; padding: 1px 6px; }
 .ss-w-tab[data-on] .ss-w-tab-count { color: var(--ss-w-accent); }
@@ -820,3 +826,35 @@
 .ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }
 .ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }
 .ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }
+
+/* ---- Today tab (u355) ---- */
+.ss-w-sec-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-sec-head::after { content: ""; flex: 1; height: 1px; background: var(--ss-w-line); }
+.ss-w-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }
+.ss-w-today-live { display: flex; flex-direction: column; gap: 2px; }
+
+.ss-w-grp { border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; }
+.ss-w-grp-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: var(--ss-w-bubble); border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }
+.ss-w-grp-head:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
+.ss-w-grp-chev { color: var(--ss-w-faint); font-size: 10px; flex: none; }
+.ss-w-grp-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-grp-country { font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-grp-count { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
+.ss-w-grp-body { display: flex; flex-direction: column; padding: 2px 11px 6px; }
+
+.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-drow:last-child { border-bottom: none; }
+.ss-w-drow-when { font-size: 11px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }
+.ss-w-drow-when--live { color: var(--ss-w-neg); }
+/* Each side ellipsises independently: a single joined string truncates the away team off the end,
+   which is the u350 betting-card truncation one layer down. */
+.ss-w-drow-fx { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.ss-w-drow-side { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 0; }
+.ss-w-drow-nm { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-drow-dash { flex: none; color: var(--ss-w-faint); font-size: 11px; }
+.ss-w-drow-sc { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+.ss-w-drow-sc--idle { color: var(--ss-w-faint); font-weight: 600; }
+.ss-w-drow--live { background: color-mix(in srgb, var(--ss-w-neg) 5%, transparent); border-radius: 8px; padding: 7px 6px; margin: 0 -6px; border-bottom: none; }
+.ss-w-drow-crest { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: contain; background: var(--ss-w-bubble); }
+
+.ss-w-stale { font-size: 11px; font-weight: 600; color: var(--ss-w-cta); background: color-mix(in srgb, var(--ss-w-cta) 12%, var(--ss-w-panel)); border-radius: 8px; padding: 6px 9px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "Embeddable SensibleStats chat widget for React.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -37,7 +37,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@sensiblestats/widget-sdk": "^0.32.0",
+    "@sensiblestats/widget-sdk": "^0.34.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0"
   },