fix: tighten calculator layout for full-screen mobile sizing

samples/calc-02/index.css

@@ -46,14 +46,14 @@ body {
 	min-height: 100vh;
 	display: grid;
 	place-items: center;
-	padding: clamp(12px, 2vw, 28px);
+	padding: 0;
 }
 
 .calculator {
-	width: min(100vw - 24px, 1120px);
-	height: min(100vh - 24px, 900px);
+	width: 100%;
+	height: 100%;
 	display: grid;
-	padding: clamp(12px, 1.8vw, 18px);
+	padding: 8px;
 	border-radius: 8px;
 	background: linear-gradient(180deg, var(--panel2), var(--panel));
 	border: 1px solid var(--edge);
@@ -96,8 +96,8 @@ body {
 .display-panel {
 	position: relative;
 	width: 100%;
-	padding: clamp(12px, 1.5vw, 16px);
-	padding-bottom: clamp(4px, 0.6vw, 8px);
+	padding: 16px;
+	padding-bottom: 8px;
 	background: linear-gradient(180deg, var(--display), var(--display2));
 	color: var(--displayText);
 	font-family: "Courier New", monospace;
@@ -416,9 +416,9 @@ button:active {
 
 @media (orientation: portrait), (max-width: 860px) {
 	.calculator {
-		width: min(100vw - 16px, 760px);
+		width: 100%;
 		height: auto;
-		min-height: calc(100vh - 16px);
+		min-height: 100%;
 		grid-template-columns: 1fr;
 		grid-template-rows: minmax(160px, auto) auto auto auto;
 		row-gap: 6px;
@@ -452,19 +452,19 @@ button:active {
 
 @media (max-width: 520px) {
 	.app-shell {
-		padding: 8px;
+		padding: 0;
 	}
 
 	.calculator {
 		width: 100%;
-		min-height: calc(100vh - 16px);
+		min-height: 100%;
 		border-radius: 8px;
-		padding: 10px;
+		padding: 8px;
 		gap: 12px;
 	}
 
 	.display-panel {
-		padding: 10px;
+		padding: 8px;
 		padding-bottom: 8px;
 	}
 
@@ -474,19 +474,19 @@ button:active {
 	}
 
 	.stack-copy-button {
-		padding: 5px 7px;
-		min-width: 28px;
+		padding: 4px;
+		min-width: 24px;
 	}
 
 	button {
 		border-radius: 8px;
-		padding: 8px 6px;
+		padding: 10px 8px;
 		font-size: 13px;
 		line-height: 1;
 	}
 
 	.display-buttons-panel {
-		gap: 6px;
+		gap: 8px;
 	}
 
 }