@sensiblestats/widget-react 0.60.3 → 0.60.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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" }),
@@ -8376,8 +8379,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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: 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 8px; }
-.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
+.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: 24px; }
@@ -8516,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; }
@@ -8543,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; }