fix(calc-02): constrain keypad area with internal scrolling

Wrap the keypad, function, and trig panels in a dedicated scroll area so the calculator shell can use a fixed grid layout without overflowing the viewport. Also update panel styling to preserve spacing and scrollbar behavior.

samples/calc-02/index.css

@@ -56,14 +56,15 @@ body {
 	height: 100vh;
 	max-height: 100vh;
 	padding: 8px;
+	display: grid;
+	grid-template-rows: auto auto minmax(0, 1fr);
+	gap: 8px;
 	border-radius: 8px;
 	background: var(--panel);
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 	justify-content: stretch;
 	align-content: start;
-	overflow-y: auto;
-	scrollbar-width: thin;
-	scrollbar-color: rgba(46, 105, 135, 1);
+	overflow: hidden;
 }
 
 .display-block,
@@ -139,6 +140,7 @@ body {
 .display-buttons-panel {
 	padding: 8px;
 	min-height: 0;
+	background: rgba(6, 10, 16, 0.16);
 }
 
 .display-buttons-grid {
@@ -225,12 +227,17 @@ body {
 
 .calculator > .display-block,
 .calculator > .display-buttons-panel,
-.calculator > .keypad-panel,
-.calculator > .functions-panel,
-.calculator > .trigo-panel {
+.calculator > .keypad-scroll-area {
 	justify-self: stretch;
 }
 
+.keypad-scroll-area {
+	min-height: 0;
+	overflow-y: auto;
+	scrollbar-width: thin;
+	scrollbar-color: rgba(46, 105, 135, 1);
+}
+
 .status-bar {
 	position: absolute;
 	top: 0;
@@ -287,7 +294,6 @@ button {
 	border: 1px solid rgba(14, 18, 25, 0.85);
 	border-radius: 8px;
 	padding: 8px 8px;
-
 	font: inherit;
 	font-weight: 700;
 	color: var(--btnText);
@@ -322,6 +328,7 @@ button:active {
 		opacity: 0.7;
 	}
 }
+
 .stack-copy-button {
 	padding: 4px;
 	min-width: 24px;