style: tighten calculator sample layout spacing

Remove the responsive two-column desktop arrangement and make the calculator stack vertically with a 4-column display button row that preserves alignment. Also align the display buttons with the shared base button styling.

.memory/state.md

@@ -1,9 +1,9 @@
 # State
 - Core engine: `src/rpn-calculator.js`
-- Active demo: `samples/calc-02/` responsive HP48GX layout with portrait/landscape support; display-adjacent button row stays in 4 columns
+- Active demo: `samples/calc-02/` portrait-only HP48GX layout; display-adjacent button row stays in 4 columns and now shares the same base button styling as the function keys
 - Mode button shows the current angle mode only; selecting a mode uses a popup menu
 - Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`
 - Config: `maxSize`, `base`, `angleMode`, `enabledCommands`
 - Commands: arithmetic, stack, trigonometry, constants `pi` and `e`; arithmetic now includes `root` for y-th roots
-- Demo actions: keyboard focus is kept on the hidden input on desktop so typing keeps working; the keypad layout places Enter in the bottom-left, ± in the former Enter position, and Esc before Clear for safety; paste parses clipboard text as a number before pushing it to the stack; Ctrl+V is supported via the hidden input paste event; backspace is ignored when the stack is empty; operation errors are shown as an overlay bar on top of the calculator with a shorter timeout and darker red
+- Demo actions: keyboard focus is kept on the hidden input on desktop so typing keeps working; the keypad layout places Enter in the bottom-left, ± in the former Enter position, and Esc before Clear for safety; paste parses clipboard text as a number before pushing it to the stack; Ctrl+V is supported via the hidden input paste event; backspace is ignored when the stack is empty; operation errors are shown as an overlay bar on top of the calculator with a shorter timeout and darker red; the display button row uses a 4-column grid with a spacer cell to preserve alignment
 - Exports: browser `window.RpnCalculator`, CommonJS `module.exports`

samples/calc-02/index.css

@@ -1,3 +1,5 @@
+
+
 :root {
 	--bg0: #10151e;
 	--bg1: #1b2432;
@@ -45,38 +47,43 @@ body {
 .app-shell {
 	min-height: 100vh;
 	display: grid;
-	place-items: center;
+	align-items: start;
+	justify-items: center;
 	padding: 0;
 }
 
 .calculator {
 	width: 100%;
-	height: 100%;
+	height: auto;
 	display: grid;
 	padding: 8px;
 	border-radius: 8px;
 	background: linear-gradient(180deg, var(--panel2), var(--panel));
 	border: 1px solid var(--edge);
 	box-shadow: 0 26px 70px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
-	grid-template-columns: 1.3fr 0.9fr;
+	grid-template-columns: 1fr;
-	grid-template-rows: minmax(0, 0.62fr) min-content minmax(180px, 1fr) minmax(180px, 1fr);
+	grid-template-rows: auto auto auto auto auto;
-	align-content: start;
+	row-gap: 6px;
 	grid-template-areas:
-		"display functions"
+		"display"
-		"display functions"
+		"display-buttons"
-		"keypad functions"
+		"keypad"
-		"keypad trigo";
+		"functions"
-	row-gap: 0;
+		"trigo";
-	column-gap: clamp(10px, 1.4vw, 18px);
 }
 
 .display-block,
 .display-panel,
-.display-buttons-panel,
 .keypad-panel,
 .functions-panel,
-.trigo-panel,
+.trigo-panel {
-.status-line {
+	border-radius: 8px;
+	border: 1px solid rgba(255, 255, 255, 0.06);
+	background: rgba(6, 10, 16, 0.16);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.display-buttons-panel {
 	border-radius: 8px;
 	border: 1px solid rgba(255, 255, 255, 0.06);
 	background: rgba(6, 10, 16, 0.16);
@@ -108,14 +115,6 @@ body {
 	margin-bottom: 0;
 }
 
-.display-frame {
-	margin: 0;
-	padding: 0;
-}
-
-.display-buttons-panel {
-	margin-top: 0;
-}
 
 .display-grid {
 	height: 100%;
@@ -151,37 +150,55 @@ body {
 }
 
 .display-buttons-panel {
-	width: 100%;
+	grid-area: display-buttons;
 	padding: 8px;
+	align-self: start;
+	min-height: 0;
+}
+
+.display-buttons-grid {
 	display: grid;
 	grid-template-columns: repeat(4, minmax(0, 1fr));
-	grid-template-rows: repeat(2, auto);
 	gap: 8px;
 	align-content: start;
 	align-items: stretch;
-	grid-auto-flow: row;
+}
-	grid-auto-rows: auto;
+
-	background: linear-gradient(180deg, #242a33, #1a1f27);
+.display-button-spacer {
-	border-color: rgba(255, 255, 255, 0.04);
+	pointer-events: none;
-	margin-top: 0;
+	visibility: hidden;
+	background: transparent;
+	border-color: transparent;
+	box-shadow: none;
 }
 
 .display-button {
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 rgba(0, 0, 0, 0.34);
+	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
-	background-clip: padding-box;
+	color: #eef2f7;
-	background: linear-gradient(180deg, #3a414c, #252b34);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
-	color: #e8edf3;
-	border-color: rgba(255, 255, 255, 0.05);
 }
 
-.display-button-offset {
+
-	grid-column-start: 2;
+.display-button-symbol {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 1.2em;
+	font-size: 1.05em;
+	line-height: 1;
+	font-weight: 800;
+	transform: translateY(-0.01em);
 }
 
-.display-buttons-panel > button {
+.paste-symbol {
-	width: 100%;
+	font-size: 1em;
 }
 
+.display-buttons-grid > button {
+	padding: 6px 8px;
+}
+
+
 .mode-menu {
 	position: fixed;
 	z-index: 20;
@@ -189,9 +206,8 @@ body {
 	gap: 6px;
 	padding: 10px;
 	border-radius: 8px;
-		background: rgba(18, 24, 33, 0.98);
+		background: rgba(6, 10, 16, 0.16);
 	border: 1px solid rgba(255, 255, 255, 0.08);
-
 	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
 }
 
@@ -209,35 +225,12 @@ body {
 	color: #eef2f7;
 }
 
-.display-button:nth-child(6) {
+.keypad-panel,
-	background: linear-gradient(180deg, #343b46, #20262e);
+.functions-panel,
-}
-
-.display-button:nth-child(7) {
-	background: linear-gradient(180deg, #343b46, #20262e);
-}
-
-.keypad-panel {
-	grid-area: keypad;
-	padding: 10px;
-}
-
-.functions-panel {
-	grid-area: functions;
-	padding: 10px;
-	align-self: start;
-	min-height: 0;
-	padding-top: 10px;
-	padding-bottom: 8px;
-}
-
 .trigo-panel {
-	grid-area: trigo;
+	padding: 8px;
-	padding: 10px;
 	align-self: start;
 	min-height: 0;
-	padding-top: 10px;
-	padding-bottom: 8px;
 }
 
 .status-bar {
@@ -300,7 +293,7 @@ body {
 button {
 	border: 1px solid rgba(14, 18, 25, 0.85);
 	border-radius: 8px;
-	padding: 10px 8px;
+	padding: 8px 8px;
 
 	font: inherit;
 	font-weight: 700;
@@ -316,18 +309,12 @@ button:hover {
 	filter: brightness(1.06);
 }
 
-.display-button:hover {
-	filter: brightness(1.08);
-}
 
 button:active {
 	transform: translateY(2px);
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.25);
 }
 
-.display-button:active {
-	transform: translateY(2px);
-}
 
 .stack-copy-button {
 	padding: 4px;
@@ -379,7 +366,6 @@ button:active {
 	outline-offset: 2px;
 }
 
-
 .key-default {
 	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
 	color: #eef2f7;
@@ -390,11 +376,6 @@ button:active {
 	color: #eef2f7;
 }
 
-.key-alt {
-	background: linear-gradient(180deg, var(--btnAltTop), var(--btnAltBottom));
-	color: #eef2f7;
-}
-
 .key-danger {
 	background: linear-gradient(180deg, var(--btnDangerTop), var(--btnDangerBottom));
 	color: #eef2f7;
@@ -403,6 +384,23 @@ button:active {
 .key-enter {
 	background: linear-gradient(180deg, var(--btnEnterTop), var(--btnEnterBottom));
 	color: #eef2f7;
+	padding-inline: 6px;
+}
+
+@media (max-width: 700px) {
+	.key-enter {
+		padding-inline: 4px;
+		letter-spacing: 0.01em;
+	}
+
+	.display-button-symbol {
+		min-width: 1.28em;
+		font-size: 1.3em;
+	}
+
+	.display-buttons-grid > button {
+		padding: 6px 8px;
+	}
 }
 
 .hidden-input {
@@ -414,79 +412,4 @@ button:active {
 	pointer-events: none;
 }
 
-@media (orientation: portrait), (max-width: 860px) {
-	.calculator {
-		width: 100%;
-		height: auto;
-		min-height: 100%;
-		grid-template-columns: 1fr;
-		grid-template-rows: minmax(160px, auto) auto auto auto;
-		row-gap: 6px;
-		grid-template-areas:
-			"display"
-			"keypad"
-			"functions"
-			"trigo";
-	}
 
-	.display-buttons-panel {
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-		grid-template-rows: repeat(2, auto);
-		margin-top: 0;
-		margin-bottom: 0;
-		padding-top: 4px;
-		padding-bottom: 4px;
-		align-content: start;
-	}
-
-	.keypad-grid {
-		grid-template-rows: repeat(5, minmax(42px, 1fr));
-	}
-
-	.functions-grid,
-	.trigo-grid {
-		grid-auto-rows: minmax(0, auto);
-		grid-template-rows: repeat(2, minmax(0, 1fr));
-	}
-}
-
-@media (max-width: 520px) {
-	.app-shell {
-		padding: 0;
-	}
-
-	.calculator {
-		width: 100%;
-		min-height: 100%;
-		border-radius: 8px;
-		padding: 8px;
-		gap: 12px;
-	}
-
-	.display-panel {
-		padding: 8px;
-		padding-bottom: 8px;
-	}
-
-	.stack-cell {
-		font-size: clamp(16px, 5.2vw, 22px);
-		gap: 8px;
-	}
-
-	.stack-copy-button {
-		padding: 4px;
-		min-width: 24px;
-	}
-
-	button {
-		border-radius: 8px;
-		padding: 10px 8px;
-		font-size: 13px;
-		line-height: 1;
-	}
-
-	.display-buttons-panel {
-		gap: 8px;
-	}
-
-}

samples/calc-02/index.html

@@ -21,18 +21,21 @@
 						</div>
 					</div>
 				</div>
-
-				<div class="display-buttons-panel">
-					<button id="modeButton" class="display-button">Mode</button>
-					<button id="pasteButton" class="display-button">⎘</button>
-					<button id="upButton" class="display-button">↑</button>
-					<button id="constButton" class="display-button">π</button>
-					<button id="leftButton" class="display-button display-button-offset">←</button>
-					<button id="downButton" class="display-button">↓</button>
-					<button id="rightButton" class="display-button">→</button>
-				</div>
 			</div>
 
+			<div class="display-buttons-panel">
+				<div class="display-buttons-grid">
+					<button id="modeButton" class="display-button">Mode</button>
+					<button id="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button>
+					<button id="upButton" class="display-button"><span class="display-button-symbol arrow-symbol">↑</span></button>
+					<button id="constButton" class="display-button">π</button>
+					<div class="display-button-spacer"></div>
+					<button id="leftButton" class="display-button display-button-offset"><span class="display-button-symbol arrow-symbol">←</span></button>
+					<button id="downButton" class="display-button"><span class="display-button-symbol arrow-symbol">↓</span></button>
+					<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
+				</div>
+			</div>
+			
 			<div class="keypad-panel">
 				<div class="keypad-grid" id="keypadGrid"></div>
 			</div>

samples/calc-02/index.js

@@ -78,7 +78,6 @@ const trigoKeys = [
 	{ label: '', spacer: true },
 ];
 
-
 const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
 
 function focusInput() {
@@ -229,7 +228,6 @@ function execute(name) {
 			} else if (calc.isValidIndex(0)) {
 				calc.remove(0);
 			}
-
 		} else if (name === 'swap') {
 			pushEditingValueIfNeeded();
 			if (calc.isValidIndex(1)) {
@@ -490,12 +488,10 @@ downButton.addEventListener('click', () => {
 	}
 });
 
-
 rightButton.addEventListener('click', () => {
 	execute('swap');
 });
 
-
 window.addEventListener('keydown', handleKeyboard, { capture: true });
 window.addEventListener('load', focusInput);
 window.addEventListener('pageshow', focusInput);