From feeef3e9d83282f457155954fa4506a873d42446 Mon Sep 17 00:00:00 2001 From: "Claude (via Marty)" Date: Thu, 30 Jul 2026 22:56:23 +0000 Subject: [PATCH] Mobile: let grid/flex items shrink (strategy-select min-content blew controls to 607px), wrap tabs, single-column controls under 480px --- index.html | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 863f24c..3605913 100644 --- a/index.html +++ b/index.html @@ -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%; } + }