marty/cbp-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile: let grid/flex items shrink (strategy-select min-content blew controls to 607px), wrap tabs, single-column controls under 480px

Browse Source
This commit is contained in:
Claude (via Marty)
2026-07-30 22:56:23 +00:00
parent ee13321067
commit feeef3e9d8
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+16 -1
View File
@@ -461,6 +461,16 @@
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.control-group select, .control-group input {
width: 100%;
min-width: 0;
max-width: 100%;
}
.checkbox-row, .shared-link-row, .qr-row, .sub-hint {
min-width: 0;
max-width: 100%;
}
.control-group label {
font-size: 0.72rem;
@@ -1036,13 +1046,18 @@
.checkbox-row { gap: 8px; padding: 8px 10px; }
.summary-grid { grid-template-columns: repeat(2, 1fr); }
.summary-card .value { font-size: 1.15rem; }
.tab-btn { font-size: 0.75rem; padding: 7px 10px; }
.tabs { flex-wrap: wrap; }
.tab-btn { flex: 1 1 30%; min-width: 0; font-size: 0.75rem; padding: 7px 10px; }
table { font-size: 0.74rem; }
thead th, tbody td { padding: 8px 10px; }
#chartContainer, #chartContainer2, #chartContainer3 { height: 240px; }
.hero-links { flex-direction: column; align-items: center; gap: 10px; }
.hero-links .sep { display: none; }
}
@media (max-width: 480px) {
.controls { grid-template-columns: 1fr; }
.tab-btn { flex: 1 1 45%; }
}
</style>
</head>
<body>