fix: make calc-02 panels stretch and scroll within container

samples/calc-02/index.css

@@ -52,7 +52,8 @@ body {
 .calculator {
 	width: 100%;
 	max-width: 460px;
-	height: auto;
+	height: 100%;
+	max-height: 100%;
 	display: grid;
 	padding: 8px;
 	border-radius: 8px;
@@ -60,13 +61,49 @@ body {
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 	grid-template-columns: 1fr;
 	grid-template-rows: auto auto auto auto auto;
-	row-gap: 6px;
+	gap: 6px;
-	grid-template-areas:
+	justify-content: stretch;
-		"display"
+	align-content: start;
-		"display-buttons"
+	overflow-y: auto;
-		"keypad"
+}
-		"functions"
+
-		"trigo";
+.calculator > .display-block {
+	grid-row: 1;
+}
+
+.calculator > .display-buttons-panel {
+	grid-row: 2;
+}
+
+.calculator > .keypad-panel {
+	grid-row: 3;
+}
+
+.calculator > .functions-panel {
+	grid-row: 4;
+}
+
+.calculator > .trigo-panel {
+	grid-row: 5;
+}
+
+.display-buttons-panel,
+.keypad-panel,
+.functions-panel,
+.trigo-panel {
+	align-self: start;
+	justify-self: stretch;
+}
+
+.keypad-panel,
+.functions-panel,
+.trigo-panel {
+	overflow: auto;
+	min-height: 0;
+}
+
+.calculator > .trigo-panel {
+	margin-top: 0;
 }
 
 .display-block,
@@ -88,7 +125,6 @@ body {
 }
 
 .display-block {
-	grid-area: display;
 	display: grid;
 	gap: 0;
 	align-self: start;
@@ -147,9 +183,7 @@ body {
 	font-size: 20px;
 }
 .display-buttons-panel {
-	grid-area: display-buttons;
 	padding: 8px;
-	align-self: start;
 	min-height: 0;
 }
 
@@ -232,10 +266,17 @@ body {
 .functions-panel,
 .trigo-panel {
 	padding: 8px;
-	align-self: start;
 	min-height: 0;
 }
 
+.calculator > .display-block,
+.calculator > .display-buttons-panel,
+.calculator > .keypad-panel,
+.calculator > .functions-panel,
+.calculator > .trigo-panel {
+	justify-self: stretch;
+}
+
 .status-bar {
 	position: absolute;
 	top: 0;