From 256e9f2b33a69a04607ef5c349f1732fbf437515 Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 16 May 2026 01:01:14 +0200
Subject: [PATCH] refactor(calc-02): move display buttons into their own grid
 area

---
 samples/calc-02/index.css  | 38 +++++++++++---------------------------
 samples/calc-02/index.html | 20 ++++++++++----------
 samples/calc-02/index.js   |  1 -
 3 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css
index 295651d..721d107 100644
--- a/samples/calc-02/index.css
+++ b/samples/calc-02/index.css
@@ -113,9 +113,6 @@ body {
 	padding: 0;
 }
 
-.display-buttons-panel {
-	margin-top: 0;
-}
 
 .display-grid {
 	height: 100%;
@@ -151,8 +148,15 @@ body {
 }
 
 .display-buttons-panel {
-	width: 100%;
-	padding: 8px;
+	grid-area: display-buttons;
+	padding: 10px;
+	align-self: start;
+	min-height: 0;
+	padding-top: 10px;
+	padding-bottom: 8px;
+}
+
+.display-buttons-grid {
 	display: grid;
 	grid-template-columns: repeat(4, minmax(0, 1fr));
 	grid-template-rows: repeat(2, auto);
@@ -161,9 +165,6 @@ body {
 	align-items: stretch;
 	grid-auto-flow: row;
 	grid-auto-rows: auto;
-	background: linear-gradient(180deg, #242a33, #1a1f27);
-	border-color: rgba(255, 255, 255, 0.04);
-	margin-top: 0;
 }
 
 .display-button {
@@ -178,10 +179,6 @@ body {
 	grid-column-start: 2;
 }
 
-.display-buttons-panel > button {
-	width: 100%;
-}
-
 .mode-menu {
 	position: fixed;
 	z-index: 20;
@@ -420,25 +417,16 @@ button:active {
 		height: auto;
 		min-height: 100%;
 		grid-template-columns: 1fr;
-		grid-template-rows: minmax(160px, auto) auto auto auto;
+		grid-template-rows: minmax(0px, auto) auto auto auto;
 		row-gap: 6px;
 		grid-template-areas:
 			"display"
+			"display-buttons"
 			"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));
 	}
@@ -485,8 +473,4 @@ button:active {
 		line-height: 1;
 	}
 
-	.display-buttons-panel {
-		gap: 8px;
-	}
-
 }
diff --git a/samples/calc-02/index.html b/samples/calc-02/index.html
index ea3234f..2786cab 100644
--- a/samples/calc-02/index.html
+++ b/samples/calc-02/index.html
@@ -21,18 +21,18 @@
 						</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">
+				<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 class="keypad-panel">
 				<div class="keypad-grid" id="keypadGrid"></div>
 			</div>
diff --git a/samples/calc-02/index.js b/samples/calc-02/index.js
index 06ae9f9..8d76bfd 100644
--- a/samples/calc-02/index.js
+++ b/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() {