@sensiblestats/widget-react 0.60.2 → 0.60.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.60.4
+
+### Patch Changes
+
+- Games: Higher/Lower labels stay on one line (Turkish "Daha fazla" wrapped), and the Beat the Grid board shrinks its rows so the whole grid and the search field fit on screen while the search sheet is open.
+
+## 0.60.3
+
+### Patch Changes
+
+- Higher or Lower fits the widget panel: the two player cards share the available height (photos scale with them), Higher/Lower sit side by side, and a compact type scale applies on short panels, so both players and the buttons stay on screen without scrolling.
+
 ## 0.60.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -5692,8 +5692,11 @@ function BeatTheGridGame({
       /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
         "div",
         {
-          className: "ss-g-btg-grid",
-          style: { gridTemplateColumns: `64px repeat(${cols.length}, minmax(0, 1fr))` },
+          className: activeCell !== null ? "ss-g-btg-grid ss-g-btg-grid--fit" : "ss-g-btg-grid",
+          style: {
+            gridTemplateColumns: `64px repeat(${cols.length}, minmax(0, 1fr))`,
+            gridTemplateRows: `minmax(44px, 60px) repeat(${rows.length}, minmax(44px, 98px))`
+          },
           role: "grid",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ss-g-btg-corner" }),
@@ -8360,24 +8363,43 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-hl-prompt-q { font-size: 13px; color: var(--ss-g-muted); }
 .ss-g-hl-prompt-stat { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
 .ss-g-hl-prompt-season { font-size: 12px; color: var(--ss-g-muted); }
-.ss-g-hl-pair { display: flex; flex-direction: column; gap: 12px; }
-.ss-g-hl-card { display: flex; min-height: 196px; border-radius: 18px; overflow: hidden; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }
+/* The pair fills whatever height the panel leaves (a laptop demo panel is ~670px, the design 860px):
+   both cards share it and the photos scale with them, so Higher/Lower never fall below the fold. */
+.ss-g-hl .ss-g-body { overflow-y: auto; container: hl / size; }
+.ss-g-hl-pair { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+.ss-g-hl-card { flex: 1 1 0; min-height: min-content; max-height: 240px; display: flex; border-radius: 18px; overflow: hidden; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }
 .ss-g-hl-card--b { border-color: var(--ss-g-line-warm); }
-.ss-g-hl-photo-wrap { width: 40%; max-width: 170px; flex: none; display: flex; align-items: flex-end; justify-content: center; background: var(--ss-g-raised); overflow: hidden; }
+.ss-g-hl-photo-wrap { width: 38%; max-width: 160px; flex: none; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; background: var(--ss-g-raised); overflow: hidden; }
 .ss-g-hl-photo-wrap .ss-g-sil { border-radius: 0; background: transparent; }
 .ss-g-hl-photo { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ss-g-muted); font: 800 36px var(--ss-g-font-display); }
 .ss-g-hl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
-.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px; }
+.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; }
 .ss-g-hl-first { font-size: 13px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ss-g-hl-surname { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ss-g-hl-value { font: 800 76px var(--ss-g-font-display); line-height: 1; color: var(--ss-w-accent); margin-top: 10px; }
+.ss-g-hl-surname { font: 800 26px var(--ss-g-font-display); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-g-hl-value { font: 800 56px var(--ss-g-font-display); line-height: .95; color: var(--ss-w-accent); margin-top: 6px; }
 .ss-g-hl-stat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-g-muted); }
-.ss-g-hl-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
-.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
-.ss-g-hl-vs { position: relative; z-index: 1; align-self: center; width: 48px; height: 48px; margin: -30px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }
+.ss-g-hl-btns { display: flex; flex-direction: row; gap: 8px; margin-top: 12px; }
+.ss-g-hl-btns .ss-g-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; gap: 4px; }
+/* Labels stay on one line: Turkish "DAHA FAZLA" wrapped to two in a ~115px button. */
+.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
+.ss-g-hl-btns .ss-g-btn svg { flex: none; }
+.ss-g-hl-vs { position: relative; z-index: 1; flex: none; align-self: center; width: 44px; height: 44px; margin: -28px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }
 /* Clear the VS badge that straddles the seam between the two cards. */
-.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 30px; }
-.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 30px; }
+.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }
+.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 24px; }
+/* Short panels (a ~580px widget on a small laptop): tighten the type so both cards and the
+   Higher/Lower buttons stay on screen; below this the body scrolls rather than clipping names. */
+@container hl (max-height: 420px) {
+  .ss-g-hl-prompt-stat { font-size: 24px; }
+  .ss-g-hl-prompt-season { display: none; }
+  .ss-g-hl-info { padding: 8px 12px; }
+  .ss-g-hl-surname { font-size: 22px; }
+  .ss-g-hl-value { font-size: 42px; margin-top: 2px; }
+  .ss-g-hl-btns { margin-top: 8px; }
+  .ss-g-hl-vs { width: 38px; height: 38px; margin: -22px 0; font-size: 15px; }
+  .ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 18px; }
+  .ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 18px; }
+}
 .ss-g-hl-feedback { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ss-g-ink-2); }
 .ss-g-hl-feedback[data-correct="true"] svg { color: var(--ss-g-success); }
 .ss-g-hl-feedback[data-correct="false"] svg { color: var(--ss-g-wrong-mark); }
@@ -8499,10 +8521,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* ---- Beat the Grid (u393) ---- */
 .ss-g-btg-grid { display: grid; gap: 6px; }
-.ss-g-btg-colhdr { height: 60px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
+/* While the search sheet is pinned below, the grid shrinks its rows to share the body with it
+   instead of pushing the bottom row under the sheet. */
+.ss-g-btg-grid--fit { flex: 0 1 auto; min-height: 0; }
+.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
 .ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }
 .ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; }
-.ss-g-btg-cell { position: relative; height: 98px; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }
+.ss-g-btg-cell { position: relative; min-height: 0; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }
 .ss-g-btg-cell:disabled { cursor: default; }
 .ss-g-btg-cell[data-state="active"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }
 .ss-g-btg-cell[data-state="correct"], .ss-g-btg-cell[data-state="wrong"] { justify-content: flex-end; background: var(--ss-g-surface); border-style: solid; }
@@ -8526,6 +8551,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-btg-sheet .ss-g-search-box { height: 48px; border-radius: 12px; background: var(--ss-g-ground); }
 .ss-g-btg-sheet-empty { font-size: 13px; color: var(--ss-g-muted); }
 .ss-g-btg-sheet .ss-g-opt { background: var(--ss-g-raised); }
+.ss-g-btg-sheet .ss-g-opts { max-height: 160px; }
 .ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }