diff --git a/README.md b/README.md
index 419ced4..9934e2d 100644
--- a/README.md
+++ b/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
diff --git a/public/shell.js b/public/shell.js
index 67c49dc..0f64e2d 100644
--- a/public/shell.js
+++ b/public/shell.js
@@ -328,18 +328,14 @@ function setGridCols(value, { save = true } = {}) {
const STEP_MINUS_SVG = '';
const STEP_PLUS_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;
};
diff --git a/public/style.css b/public/style.css
index 1eacba1..922fc62 100644
--- a/public/style.css
+++ b/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;
}