@sensiblestats/widget-react 0.41.0 → 0.42.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 0.42.0
+
+### Minor Changes
+
+- Two-tier layout for betting-insight cards so nothing truncates on a narrow panel: the competition, kickoff and match pin sit on a quiet meta line above a full-width fixture line (long club names no longer clip), and the market label gets its own line above the selection · odds · slip · pin pick row. The market-odds card's fixture line adopts the same hero weight so both card types read consistently.
+
 ## 0.41.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1940,55 +1940,60 @@ function InsightCard({ it, ui, slip, monitor }) {
   const kickoff = it.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(it.kickoffUtc) : void 0;
   const hasNamedTeams = !!it.homeTeamName && !!it.awayTeamName;
   const leftIsFixture = hasNamedTeams || !!it.fixture;
-  const compInMeta = leftIsFixture && !!it.competition;
   const showPin = !!monitor && it.pinEnabled;
   const showHeader = leftIsFixture || !!it.competition || live || !!kickoff || showPin;
+  const headerControls = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    live ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-live", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
+      ui?.liveLabel ?? "Live"
+    ] }) : null,
+    kickoff ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-kick", children: [
+      kickoff.dayLabel,
+      " ",
+      kickoff.time
+    ] }) : null,
+    showPin && ui ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PinToggle, { ui, monitor, pin: { kind: "match", matchId: it.matchId } }) : null
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-binsight", children: [
-    showHeader ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-bi-header", children: [
+    showHeader ? leftIsFixture ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-bi-head", children: [
+      it.competition || live || kickoff || showPin ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-bi-meta", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-meta-left", children: it.competition ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Crest2, { kind: "comp", url: it.competitionCrest, name: it.competition }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-comp", children: it.competition })
+        ] }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-meta-right", children: headerControls })
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ss-w-bi-fixture-line", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardFixture, { it }) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-bi-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-header-left", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CardFixture, { it }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-header-right", children: [
-        live ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-live", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
-          ui?.liveLabel ?? "Live"
-        ] }) : null,
-        compInMeta ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-comp-meta", title: it.competition, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Crest2, { kind: "comp", url: it.competitionCrest, name: it.competition }) }) : null,
-        kickoff ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-kick", children: [
-          kickoff.dayLabel,
-          " ",
-          kickoff.time
-        ] }) : null,
-        showPin && ui ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PinToggle, { ui, monitor, pin: { kind: "match", matchId: it.matchId } }) : null
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-header-right", children: headerControls })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-bi-action-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-pick", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-market", children: it.market }),
-        it.selection ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-pick-dot", "aria-hidden": "true", children: "\xB7" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-sel", children: it.selection })
-        ] }) : null
-      ] }),
-      it.odds ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-odds", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("b", { children: it.odds }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OddsMovementBadge, { previous: it.previousOdds, current: it.odds, direction: it.movementDirection, ui }),
-        it.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
-      ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddToSlipButton, { it, slip, ui }),
-      showPin && ui ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        PinToggle,
-        {
-          ui,
-          monitor,
-          pin: {
-            kind: "selection",
-            matchId: it.matchId,
-            marketDeveloperName: it.marketDeveloperName,
-            selectionLabel: it.selectionLabel,
-            line: it.line,
-            matchOddsId: it.matchOddsId
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-bi-action", children: [
+      it.market ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-market", children: it.market }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-bi-pick-row", children: [
+        it.selection ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-sel", children: it.selection }) : null,
+        it.odds ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ss-w-bi-odds", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("b", { children: it.odds }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OddsMovementBadge, { previous: it.previousOdds, current: it.odds, direction: it.movementDirection, ui }),
+          it.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddToSlipButton, { it, slip, ui }),
+        showPin && ui ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          PinToggle,
+          {
+            ui,
+            monitor,
+            pin: {
+              kind: "selection",
+              matchId: it.matchId,
+              marketDeveloperName: it.marketDeveloperName,
+              selectionLabel: it.selectionLabel,
+              line: it.line,
+              matchOddsId: it.matchOddsId
+            }
           }
-        }
-      ) : null
+        ) : null
+      ] })
     ] }),
     it.isMarketFloor ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-bi-floor", children: ui?.marketFloorLabel ?? "Market price \xB7 not a value pick" }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReasonStrip, { it, ui }),
@@ -3698,10 +3703,18 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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; }
@@ -3713,24 +3726,24 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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 \xB7 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; }