@sensiblestats/widget-react 0.60.5 → 0.60.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 0.60.6
+
+### Patch Changes
+
+- Games: Higher/Lower buttons fit phone-width cards (icons drop and type tightens on narrow cards, stacking below 180px), and Guess the XI shows a nationality's three-letter code at a size that fits its disc when there is no flag.
+
 ## 0.60.5
 
 ### Patch Changes

package/dist/index.cjs

@@ -4847,6 +4847,9 @@ function nationalityFlag(nationality) {
   const key = nationality.trim().toLowerCase();
   return FLAGS[key] ?? nationality.slice(0, 3).toUpperCase();
 }
+function isNationCode(flag) {
+  return /^[A-Z]{1,3}$/.test(flag);
+}
 
 // src/components/games/PlayerAvatar.tsx
 var import_react30 = require("react");
@@ -5916,15 +5919,17 @@ function GuessTheXiGame({
           /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ss-g-gxi-rows", children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ss-g-gxi-row", children: row.map((pos, c) => {
             const posLabel = pos.slot ? posBySlot.get(pos.slot) ?? "" : "";
             const name = pos.slot ? nameBySlot.get(pos.slot) : void 0;
+            const flag = nationalityFlag(pos.nationality);
             return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ss-g-gxi-node", "data-revealed": name ? "true" : void 0, children: [
               /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "span",
                 {
                   className: "ss-g-gxi-disc",
+                  "data-code": isNationCode(flag) ? "true" : void 0,
                   role: "img",
                   title: pos.nationality,
                   "aria-label": `${posLabel ? posLabel + " \u2014 " : ""}${pos.nationality}${name ? " \u2014 " + name : ""}`,
-                  children: nationalityFlag(pos.nationality)
+                  children: flag
                 }
               ),
               name ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(name).last }) : posLabel && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-pos", children: posLabel })
@@ -8386,6 +8391,16 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* 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; }
+/* Phone-width cards: the info column is ~230px, too narrow for "DAHA FAZLA" + icon side by side.
+   Drop the icons and tighten the type first; stack the buttons only when even that cannot fit. */
+.ss-g-hl-info { container: hlinfo / inline-size; }
+@container hlinfo (max-width: 280px) {
+  .ss-g-hl-btns .ss-g-btn svg { display: none; }
+  .ss-g-hl-btns .ss-g-btn { font-size: 12px; letter-spacing: 0; padding: 0 4px; }
+}
+@container hlinfo (max-width: 180px) {
+  .ss-g-hl-btns { flex-direction: column; }
+}
 .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; }
@@ -8422,6 +8437,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-gxi-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 72px; }
 .ss-g-gxi-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-pitch-chip); border: 2px solid var(--ss-g-pitch-ink); font-size: 22px; line-height: 1; }
 .ss-g-gxi-node[data-revealed] .ss-g-gxi-disc { border-color: var(--ss-w-accent); }
+.ss-g-gxi-disc[data-code] { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ss-g-pitch-ink); }
 .ss-g-gxi-pos { max-width: 100%; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-pitch-chip); color: var(--ss-g-pitch-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-gxi-pos--name { color: var(--ss-w-accent); text-transform: uppercase; }
 .ss-g-gxi-wrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }