m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

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

Browse Source 
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.
This commit is contained in:
MatMoul
2026-05-16 22:40:23 +02:00
parent c69380d057
commit 5f2d18df99
2 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+14 -7
View File
@@ -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;
samples/calc-02/index.html
+11 -11
View File
@@ -9,7 +9,6 @@
<body>
<main class="app-shell">
<section class="calculator" aria-label="HP48GX style RPN calculator">
<div>
<div class="display-block">
<div class="display-panel">
<div class="status-bar" id="statusLine" aria-live="polite"></div>
@@ -36,19 +35,20 @@
<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
</div>
</div>
</div>
<div class="keypad-panel">
<div class="keypad-grid" id="keypadGrid"></div>
</div>
<div class="keypad-scroll-area">
<div class="keypad-panel">
<div class="keypad-grid" id="keypadGrid"></div>
</div>
<div class="functions-panel">
<div class="functions-grid" id="functionsGrid"></div>
</div>
<div class="functions-panel">
<div class="functions-grid" id="functionsGrid"></div>
</div>
<div class="trigo-panel">
<div class="trigo-grid" id="trigoGrid"></div>
</div>
<div class="trigo-panel">
<div class="trigo-grid" id="trigoGrid"></div>
</div>
</div>
<input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
</section>