README.md

@@ -274,7 +274,7 @@ below. Nothing is installed without someone clicking.
   the module's default tile. Saving over an existing name asks first, and
   the server keeps the copy it replaced: **Restore previous** in Admin →
   Saved layouts swaps it back (and swapping again undoes that). The menu's
-  **Grid** stepper sets how many columns this browser cuts the board into —
+  **Grid Size** stepper sets how many columns this browser cuts the board into —
   8 to 24, 12 by default. Finer lets tiles be smaller so more fit across (a
   4K wall), coarser suits a small screen read close up; row height follows,
   so tiles keep their shape and simply change size. Going coarser, a tile

public/shell.js

@@ -328,18 +328,14 @@ function setGridCols(value, { save = true } = {}) {
 const STEP_MINUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>';
 const STEP_PLUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>';
 
-/** The Layouts menu's density row — − 12 columns + — which steps without
+/** The Layouts menu's density row — Grid Size  − 12 + — which steps without
     closing the menu, so the board can be watched changing behind it. */
 function gridStepper() {
   const row = document.createElement('div');
   row.className = 'menu-stepper';
   const label = document.createElement('span');
   label.className = 'menu-stepper-label';
-  const name = document.createElement('span');
-  name.textContent = 'Grid';
-  const sub = document.createElement('span');
-  sub.className = 'sub';
-  label.append(name, sub);
+  label.textContent = 'Grid Size';
   const minus = document.createElement('button');
   minus.type = 'button';
   minus.className = 'menu-stepper-btn';
@@ -354,8 +350,7 @@ function gridStepper() {
   plus.innerHTML = STEP_PLUS_SVG;
   const paint = () => {
     const i = GRID_STEPS.indexOf(COLS);
-    value.textContent = `${COLS} columns`;
-    sub.textContent = COLS === GRID_DEFAULT ? 'default' : COLS < GRID_DEFAULT ? 'coarser' : 'finer';
+    value.textContent = String(COLS);
     minus.disabled = i <= 0;
     plus.disabled = i >= GRID_STEPS.length - 1;
   };

public/style.css

@@ -188,7 +188,7 @@ body.menu-hidden #topbar {
 }
 .menu-divider { height: 1px; background: var(--border); margin: 5px 4px; }
 
-/* the Layouts menu's grid-density row: − 12 columns + */
+/* the Layouts menu's grid-density row: Grid Size  − 12 + */
 .menu-stepper {
   display: flex;
   align-items: center;
@@ -197,7 +197,6 @@ body.menu-hidden #topbar {
   font-size: 13px;
 }
 .menu-stepper-label { flex: 1; }
-.menu-stepper-label .sub { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
 .menu-stepper-btn {
   width: 26px;
   height: 26px;
@@ -214,7 +213,7 @@ body.menu-hidden #topbar {
 .menu-stepper-btn[disabled] { opacity: 0.35; cursor: default; }
 .menu-stepper-btn svg { width: 12px; height: 12px; display: block; }
 .menu-stepper-value {
-  min-width: 86px;
+  min-width: 28px;
   text-align: center;
   font-variant-numeric: tabular-nums;
 }