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

fix(calc-02): align display buttons in a grid

Browse Source 
Wrap the display controls in a dedicated grid container, add a spacer for the missing cell, and simplify the button styling so the layout stays consistent across sizes.
This commit is contained in:
MatMoul
2026-05-16 01:08:11 +02:00
parent 256e9f2b33
commit 75bf6d69df
2 changed files with 22 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.css
+12 -16
View File
@@ -159,26 +159,26 @@ body {
.display-buttons-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(2, auto);
gap: 8px;
align-content: start;
align-items: stretch;
grid-auto-flow: row;
grid-auto-rows: auto;
}
.display-button {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 rgba(0, 0, 0, 0.34);
background-clip: padding-box;
background: linear-gradient(180deg, #3a414c, #252b34);
color: #e8edf3;
border-color: rgba(255, 255, 255, 0.05);
background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
color: #eef2f7;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
}
.display-button-offset {
grid-column-start: 2;
}
.display-button-spacer {
opacity: 0;
pointer-events: none;
}
.mode-menu {
position: fixed;
z-index: 20;
@@ -206,14 +206,6 @@ body {
color: #eef2f7;
}
.display-button:nth-child(6) {
background: linear-gradient(180deg, #343b46, #20262e);
}
.display-button:nth-child(7) {
background: linear-gradient(180deg, #343b46, #20262e);
}
.keypad-panel {
grid-area: keypad;
padding: 10px;
@@ -427,6 +419,10 @@ button:active {
"trigo";
}
.display-buttons-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.keypad-grid {
grid-template-rows: repeat(5, minmax(42px, 1fr));
}