From 4e8155b5f0c6f5b40b8f32014fb51f9d9793e895 Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Fri, 15 May 2026 22:35:19 +0200
Subject: [PATCH] fix(calc-02): tighten calculator layout and panel styling

Wrap the display and control buttons in a shared display block so the
stack and button panels align as a single unit. Reduce corner radii and
adjust gaps/padding across the calculator to better fit the updated
portrait and desktop layouts.
---
 samples/calc-02/index.css  | 62 +++++++++++++++++++++++++++-----------
 samples/calc-02/index.html | 36 +++++++++++-----------
 2 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css
index e9659cc..ff571a8 100644
--- a/samples/calc-02/index.css
+++ b/samples/calc-02/index.css
@@ -53,9 +53,8 @@ body {
 	width: min(100vw - 24px, 1120px);
 	height: min(100vh - 24px, 900px);
 	display: grid;
-	gap: clamp(10px, 1.4vw, 18px);
 	padding: clamp(12px, 1.8vw, 18px);
-	border-radius: 28px;
+	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);
@@ -64,28 +63,39 @@ body {
 	align-content: start;
 	grid-template-areas:
 		"display functions"
-		"buttons functions"
+		"display functions"
 		"keypad functions"
 		"keypad trigo";
-
-
+	row-gap: 0;
+	column-gap: clamp(10px, 1.4vw, 18px);
 }
 
+.display-block,
 .display-panel,
 .display-buttons-panel,
 .keypad-panel,
 .functions-panel,
 .trigo-panel,
 .status-line {
-	border-radius: 18px;
+	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-panel {
+.display-block {
 	grid-area: display;
+	display: grid;
+	gap: 0;
+	align-self: start;
+	justify-items: stretch;
+	grid-template-rows: auto auto;
+	row-gap: 0;
+}
+
+.display-panel {
 	position: relative;
+	width: 100%;
 	padding: clamp(12px, 1.5vw, 16px);
 	padding-bottom: clamp(4px, 0.6vw, 8px);
 	background: linear-gradient(180deg, var(--display), var(--display2));
@@ -95,10 +105,18 @@ body {
 	height: auto;
 	min-height: clamp(112px, 18vw, 124px);
 	max-height: none;
-	align-self: start;
 	margin-bottom: 0;
 }
 
+.display-frame {
+	margin: 0;
+	padding: 0;
+}
+
+.display-buttons-panel {
+	margin-top: 0;
+}
+
 .display-grid {
 	height: 100%;
 	display: grid;
@@ -131,7 +149,7 @@ body {
 }
 
 .display-buttons-panel {
-	grid-area: buttons;
+	width: 100%;
 	padding: 8px;
 	display: grid;
 	grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -168,9 +186,10 @@ body {
 	display: grid;
 	gap: 6px;
 	padding: 10px;
-	border-radius: 14px;
-	background: rgba(18, 24, 33, 0.98);
+	border-radius: 8px;
+		background: rgba(18, 24, 33, 0.98);
 	border: 1px solid rgba(255, 255, 255, 0.08);
+
 	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
 }
 
@@ -207,6 +226,7 @@ body {
 	align-self: start;
 	min-height: 0;
 	padding-top: 10px;
+	padding-bottom: 8px;
 }
 
 .trigo-panel {
@@ -215,6 +235,7 @@ body {
 	align-self: start;
 	min-height: 0;
 	padding-top: 10px;
+	padding-bottom: 8px;
 }
 
 .status-bar {
@@ -276,8 +297,9 @@ body {
 
 button {
 	border: 1px solid rgba(14, 18, 25, 0.85);
-	border-radius: 12px;
+	border-radius: 8px;
 	padding: 10px 8px;
+
 	font: inherit;
 	font-weight: 700;
 	color: var(--btnText);
@@ -396,10 +418,10 @@ button:active {
 		height: auto;
 		min-height: calc(100vh - 16px);
 		grid-template-columns: 1fr;
-		grid-template-rows: minmax(160px, auto) auto minmax(220px, auto) auto auto;
+		grid-template-rows: minmax(160px, auto) auto auto auto;
+		row-gap: 6px;
 		grid-template-areas:
 			"display"
-			"buttons"
 			"keypad"
 			"functions"
 			"trigo";
@@ -409,6 +431,10 @@ button:active {
 		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 {
@@ -417,7 +443,7 @@ button:active {
 
 	.functions-grid,
 	.trigo-grid {
-		grid-auto-rows: minmax(0, 1fr);
+		grid-auto-rows: minmax(0, auto);
 		grid-template-rows: repeat(2, minmax(0, 1fr));
 	}
 }
@@ -430,9 +456,9 @@ button:active {
 	.calculator {
 		width: 100%;
 		min-height: calc(100vh - 16px);
-		border-radius: 20px;
+		border-radius: 8px;
 		padding: 10px;
-		gap: 10px;
+		gap: 12px;
 	}
 
 	.display-panel {
@@ -451,7 +477,7 @@ button:active {
 	}
 
 	button {
-		border-radius: 10px;
+		border-radius: 8px;
 		padding: 8px 6px;
 		font-size: 13px;
 		line-height: 1;
diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html
index 8166124..ea3234f 100644
--- a/samples/calc-02/index.html
+++ b/samples/calc-02/index.html
@@ -9,26 +9,28 @@
 <body>
 	<main class="app-shell">
 		<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator">
-			<div class="display-panel">
-				<div class="status-bar" id="statusLine" aria-live="polite"></div>
-				<div class="display-frame">
-					<div class="display-grid">
-						<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
-						<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
-						<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
-						<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
+			<div class="display-block">
+				<div class="display-panel">
+					<div class="status-bar" id="statusLine" aria-live="polite"></div>
+					<div class="display-frame">
+						<div class="display-grid">
+							<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
+							<div class="stack-cell"><span class="stack-label">Z:</span><span id="stackZ" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
+							<div class="stack-cell"><span class="stack-label">Y:</span><span id="stackY" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
+							<div class="stack-cell"><span class="stack-label">X:</span><span id="stackX" class="stack-value"></span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button></div>
+						</div>
 					</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 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="keypad-panel">