@sensiblestats/widget-react 0.40.0 → 0.42.0

package/dist/styles.css

@@ -185,10 +185,18 @@
 .ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }
 .ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; }
 
-/* row 1: competition logo + name on the left, live badge + kickoff on the right */
+/* header, competition-hero fallback: comp on the left, live badge + kickoff + pin on the right,
+   all on one line (used when there is no fixture, and by MarketOddsCardList) */
 .ss-w-bi-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }
 .ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); }
 .ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
+/* two-tier header: a quiet meta line (competition + kickoff + match pin) stacked above the
+   fixture, so long club names get the whole width to themselves and stop truncating (u350) */
+.ss-w-bi-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-bi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+.ss-w-bi-meta-left { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
+.ss-w-bi-meta-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
+.ss-w-bi-fixture-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
 .ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }
 .ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }
@@ -200,24 +208,24 @@
 .ss-w-bi-crest { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; object-fit: contain; }
 .ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }
 
-/* header fixture atoms (team hero lives in .ss-w-bi-header-left; comp demotes to the meta) */
+/* fixture atoms -- crest-flanked team pair; shared by the insight fixture line and MarketOddsCardList */
 .ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }
 .ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-bi-comp-meta { display: inline-flex; align-items: center; gap: 5px; flex: none; min-width: 0; }
-/* shared crest-flanked team row, still consumed by MarketOddsCardList */
-.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12px; font-weight: 650; color: var(--ss-w-ink); }
-
-/* row 2: one action line -- market · selection (left, market ellipsises first), odds, slip button */
-.ss-w-bi-action-row { display: flex; align-items: center; gap: 9px; }
-.ss-w-bi-pick { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
-.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-bi-pick-dot { flex: none; color: var(--ss-w-faint); font-weight: 700; }
-.ss-w-bi-sel { flex: none; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); white-space: nowrap; }
-.ss-w-bi-odds { flex: none; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
+/* shared crest-flanked team row (MarketOddsCardList); matches .ss-w-bi-fixture-line's hero weight
+   so the fixture reads the same on both card types (u350) */
+.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+
+/* row 2, two-tier: the market label owns a full-width line above the pick row (selection grows
+   left, odds + slip + pin sit right), so neither the market name nor the fixture clips (u350) */
+.ss-w-bi-action { display: flex; flex-direction: column; gap: 6px; }
+.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); min-width: 0; }
+.ss-w-bi-pick-row { display: flex; align-items: center; gap: 9px; }
+.ss-w-bi-sel { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-w-bi-odds { flex: none; margin-left: auto; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
 .ss-w-bi-odds b { font-size: 20px; font-family: ui-monospace, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.05; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
-.ss-w-bi-action-row .ss-w-slip { flex: none; }
+.ss-w-bi-pick-row .ss-w-slip { flex: none; }
 
 /* row 3: bar-chart glyph + reasoning prose + stats-expander chevron, in a subtle strip */
 .ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }
@@ -254,7 +262,8 @@
 .ss-w-mocard--bare { border: none; border-radius: 0; padding: 0; background: none; }
 .ss-w-mo-sub { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
 .ss-w-mo-teams { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); }
+.ss-w-mo-market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+.ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-w-mo-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }
 .ss-w-mo-more:hover { text-decoration: underline; }
 .ss-w-mo-more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensiblestats/widget-react",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "description": "Embeddable SensibleStats chat widget for React.",
   "type": "module",
   "main": "./dist/index.cjs",