@sensiblestats/widget-react 0.98.0 → 0.99.0

package/dist/styles.css

@@ -734,7 +734,7 @@
 }
 
 /* greeting dashboard */
-.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
+.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; container-type: inline-size; }
 .ss-w-dash-head { display: flex; flex-direction: column; }
 .ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
 .ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }
@@ -755,8 +755,8 @@
 .ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }
 .ss-w-dash-emoji { line-height: 1; }
 .ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
-.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
-.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: break-word; hyphens: manual; }
+.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: break-word; hyphens: manual; }
 .ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }
 
 /* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A
@@ -778,6 +778,18 @@
    families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as
    part of that visual language rather than a plain unstyled button. */
 .ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }
+/* Market's two columns need the text column to fit a word: a half tile spends ~91px on border, padding,
+   icon and chevron, and a Turkish word such as "karşılaşma" is ~80px at 14px bold. Measured against the
+   dashboard's own width (a container query, not the viewport, since the panel is min(460px, 100vw - 40px)
+   and a host can embed it narrower still). Below 306px the half tiles are a single full-width column;
+   up to 349px the decorative chevron is dropped, as Discovery already does, to give the words ~24px back.
+   Words never break inside a tile (overflow-wrap: break-word), so the column count is what protects them. */
+@container (max-width: 305px) {
+  .ss-w-dash--market .ss-w-dash-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@container (min-width: 306px) and (max-width: 349px) {
+  .ss-w-dash--market .ss-w-dash-tile--half .ss-w-dash-tile-chevron { display: none; }
+}
 
 /* Goal: one column of compact cards, 60px tall with the badge as a price column on the right.
    The value ink is accent mixed toward ink (as on the hero price): plain light accent on the
@@ -798,7 +810,8 @@
 /* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets
    the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow
    column was wrapping "Most interesting angles" onto three lines. The chevron is dropped (the
-   whole card is the tap target) and the badge + crest row is forced onto one line. */
+   whole card is the tap target). The badge + crest row wraps (the base .ss-w-dash-tile-meta rule): an
+   "8 matches" pill plus three crests is wider than a half tile at a 320px viewport. */
 .ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }
 .ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }
 .ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }
@@ -806,7 +819,6 @@
    (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */
 .ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }
 .ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }
-.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }
 .ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }
 /* Tints mix a hue into the live panel rather than hardcoding a light pastel, so a dark
    operator surface (e.g. --ss-w-panel set from a navy `surface` brand color) yields a
@@ -859,8 +871,8 @@
   background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel));
 }
 .ss-w-dash-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: anywhere; }
-.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: break-word; hyphens: manual; }
+.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: break-word; hyphens: manual; }
 .ss-w-dash-hero-price {
   flex: none; margin-left: auto;
   font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 750; line-height: 1;
@@ -869,6 +881,34 @@
   border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-panel));
 }
 
+/* Page-grounded additions (u591). Both only exist when the server sends `meta` / `imageCodes`, so an
+   older payload never reaches these rules. */
+/* Hero meta ("Tip-off 02:30 · in 6 h", "Başlama 02:30 · 40 dk sonra"): takes the price's seat in the top
+   row. It is the one flexible item there -- the badge and chevron keep their width -- and it wraps
+   rather than truncates: at the narrowest panel the Turkish line (27 characters) has ~120px beside
+   the badge, and the minutes-to-tip are the part a cut-off "40..." would lose. The component keeps
+   each short " · "-separated part whole, so a wrap falls at the dot instead of inside "40 dk sonra". */
+.ss-w-dash__keep { white-space: nowrap; }
+.ss-w-dash__meta {
+  flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: break-word; hyphens: manual;
+  font-size: 11.5px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums;
+  color: var(--ss-w-faint);
+}
+/* Text marks stand in for crests until the server has images: 22px circle / 7.5px in a tile, 40px /
+   12px in the hero (u592 D23). Ring and tint follow the crests they replace; unlike crests they do not
+   overlap, because the letters are the content and an overlap would clip the first one. */
+.ss-w-dash__mark {
+  flex: none; display: grid; place-items: center; box-sizing: border-box;
+  width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
+  font-size: 7.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap;
+  color: var(--ss-w-ink);
+  background-color: color-mix(in srgb, var(--ss-w-ink) 6%, var(--ss-w-panel));
+  box-shadow: 0 0 0 2px var(--ss-w-panel), 0 0 0 3px color-mix(in srgb, var(--ss-w-ink) 10%, var(--ss-w-panel));
+}
+.ss-w-dash__mark + .ss-w-dash__mark { margin-left: 3px; }
+.ss-w-dash-hero-visual .ss-w-dash__mark { width: 40px; height: 40px; font-size: 12px; }
+.ss-w-dash-hero-visual .ss-w-dash__mark + .ss-w-dash__mark { margin-left: 6px; }
+
 /* club fan pre-match dashboard */
 .ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
 .ss-w-fandash-greeting { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); }

package/package.json

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