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; height: 100vh;
max-height: 100vh; max-height: 100vh;
padding: 8px; padding: 8px;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 8px;
border-radius: 8px; border-radius: 8px;
background: var(--panel); background: var(--panel);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
justify-content: stretch; justify-content: stretch;
align-content: start; align-content: start;
overflow-y: auto; overflow: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(46, 105, 135, 1);
} }
.display-block, .display-block,
@@ -139,6 +140,7 @@ body {
.display-buttons-panel { .display-buttons-panel {
padding: 8px; padding: 8px;
min-height: 0; min-height: 0;
background: rgba(6, 10, 16, 0.16);
} }
.display-buttons-grid { .display-buttons-grid {
@@ -225,12 +227,17 @@ body {
.calculator > .display-block, .calculator > .display-block,
.calculator > .display-buttons-panel, .calculator > .display-buttons-panel,
.calculator > .keypad-panel, .calculator > .keypad-scroll-area {
.calculator > .functions-panel,
.calculator > .trigo-panel {
justify-self: stretch; justify-self: stretch;
} }
.keypad-scroll-area {
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(46, 105, 135, 1);
}
.status-bar { .status-bar {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -287,7 +294,6 @@ button {
border: 1px solid rgba(14, 18, 25, 0.85); border: 1px solid rgba(14, 18, 25, 0.85);
border-radius: 8px; border-radius: 8px;
padding: 8px 8px; padding: 8px 8px;
font: inherit; font: inherit;
font-weight: 700; font-weight: 700;
color: var(--btnText); color: var(--btnText);
@@ -322,6 +328,7 @@ button:active {
opacity: 0.7; opacity: 0.7;
} }
} }
.stack-copy-button { .stack-copy-button {
padding: 4px; padding: 4px;
min-width: 24px; min-width: 24px;
samples/calc-02/index.html
+12 -12
View File
@@ -9,7 +9,6 @@
<body> <body>
<main class="app-shell"> <main class="app-shell">
<section class="calculator" aria-label="HP48GX style RPN calculator"> <section class="calculator" aria-label="HP48GX style RPN calculator">
<div>
<div class="display-block"> <div class="display-block">
<div class="display-panel"> <div class="display-panel">
<div class="status-bar" id="statusLine" aria-live="polite"></div> <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> <button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
</div> </div>
</div> </div>
</div>
<div class="keypad-panel">
<div class="keypad-grid" id="keypadGrid"></div>
</div>
<div class="functions-panel"> <div class="keypad-scroll-area">
<div class="functions-grid" id="functionsGrid"></div> <div class="keypad-panel">
</div> <div class="keypad-grid" id="keypadGrid"></div>
</div>
<div class="trigo-panel"> <div class="functions-panel">
<div class="trigo-grid" id="trigoGrid"></div> <div class="functions-grid" id="functionsGrid"></div>
</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"> <input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
</section> </section>