fix: use typographic operator symbols in calculator keypad

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);
+	width: 100%;
-	height: min(100vh - 24px, 900px);
+	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: 16px;
-	padding-bottom: clamp(4px, 0.6vw, 8px);
+	padding-bottom: 8px;
 	background: linear-gradient(180deg, var(--display), var(--display2));
 	color: var(--displayText);
 	font-family: "Courier New", monospace;
@@ -146,6 +146,8 @@ body {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	text-align: right;
+	justify-self: end;
 }
 
 .display-buttons-panel {
@@ -414,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;
@@ -450,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;
 	}
 
@@ -472,19 +474,19 @@ button:active {
 	}
 
 	.stack-copy-button {
-		padding: 5px 7px;
+		padding: 4px;
-		min-width: 28px;
+		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;
 	}
 
 }

samples/calc-02/index.js

@@ -37,15 +37,15 @@ const keypadKeys = [
 	{ label: '7', input: '7', className: 'key-default' },
 	{ label: '8', input: '8', className: 'key-default' },
 	{ label: '9', input: '9', className: 'key-default' },
-	{ label: '/', action: 'div', className: 'key-accent' },
+	{ label: '÷', action: 'div', className: 'key-accent' },
 	{ label: '4', input: '4', className: 'key-default' },
 	{ label: '5', input: '5', className: 'key-default' },
 	{ label: '6', input: '6', className: 'key-default' },
-	{ label: '*', action: 'mul', className: 'key-accent' },
+	{ label: '×', action: 'mul', className: 'key-accent' },
 	{ label: '1', input: '1', className: 'key-default' },
 	{ label: '2', input: '2', className: 'key-default' },
 	{ label: '3', input: '3', className: 'key-default' },
-	{ label: '-', action: 'sub', className: 'key-accent' },
+	{ label: '−', action: 'sub', className: 'key-accent' },
 	{ label: '0', input: '0', className: 'key-default' },
 	{ label: '.', input: '.', className: 'key-default' },
 	{ label: '±', action: 'neg', className: 'key-default' },