@sensiblestats/widget-react 0.37.0 → 0.37.2

package/dist/styles.css

@@ -243,6 +243,9 @@
 /* market odds card */
 .ss-w-mocards { display: flex; flex-direction: column; gap: 7px; }
 .ss-w-mocard { 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: 6px; }
+/* Embedded inside the market accordion, which already provides the card frame + accent rail --
+   drop the inner frame so odds rows aren't double-bordered. */
+.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); }
@@ -253,7 +256,7 @@
 .ss-w-mo-rows { display: flex; flex-direction: column; gap: 4px; }
 .ss-w-mo-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--ss-w-line); }
 .ss-w-mo-row:last-child { border-bottom: none; }
-.ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); flex: 1; min-width: 0; }
 .ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }
 /* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a
    shortening price as a discount, which inverts what it actually means for the bettor. */
@@ -264,7 +267,7 @@
    a flex row, and must NOT follow the badge into the insight card's odds column. */
 .ss-w-mo-row .ss-w-move { margin-left: auto; }
 .ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }
-.ss-w-mo-row .ss-w-slip { margin: 0; }
+.ss-w-mo-row .ss-w-slip { margin: 0; flex: none; }
 .ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }
 
 /* odds movement card */
@@ -316,7 +319,7 @@
 
 /* add to slip */
 .ss-w-slip { position: relative; display: flex; }
-.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; }
+.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
 .ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }
 /* Anchored to the RIGHT of its (narrow) button wrapper and sized by content, growing leftward
    into the card -- inheriting the wrapper's width squeezes the text to one character per line.
@@ -781,13 +784,17 @@
 
 /* market accordion (Task 9): one collapsed row per available market, expanding into a reused
    MarketOddsCardList ladder (hideHeader -- the row header already carries the market label). */
+/* Pinned-match tile: the match card + its odds accordion, spaced apart. */
+.ss-w-mon-item { display: flex; flex-direction: column; gap: 10px; }
 .ss-w-acc { display: flex; flex-direction: column; gap: 6px; }
 .ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }
-.ss-w-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); }
-.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; }
-.ss-w-acc-label { font-size: 12.5px; font-weight: 600; }
-.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); }
-.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); }
+/* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */
+.ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }
+.ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }
+.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }
+.ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }
+.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); flex: none; }
 .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; }

package/package.json

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