refactor(calc-02): move display buttons into their own grid area

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;
-	}
-
 }

samples/calc-02/index.html

@@ -21,6 +21,7 @@
 						</div>
 					</div>
 				</div>
+			</div>
 
 			<div class="display-buttons-panel">
 				<button id="modeButton" class="display-button">Mode</button>
@@ -31,7 +32,6 @@
 				<button id="downButton" class="display-button">↓</button>
 				<button id="rightButton" class="display-button">→</button>
 			</div>
-			</div>
 			
 			<div class="keypad-panel">
 				<div class="keypad-grid" id="keypadGrid"></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() {