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.html
+12 -12
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="functions-panel">
<div class="functions-grid" id="functionsGrid"></div>
</div>
<div class="keypad-scroll-area">
<div class="keypad-panel">
<div class="keypad-grid" id="keypadGrid"></div>
</div>
<div class="trigo-panel">
<div class="trigo-grid" id="trigoGrid"></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>
<input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
</section>