Adapt date fields and group cards to narrow mobile screens
Sekta Engineer committed 2026-09-08 14:34:07 +0000

Analyzing diff...

index.html+2 −0
index da7e92c..2f511ed 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,8 @@
 .warn{background:#fff6e5;border:1px solid #edd8ac;padding:10px 12px;border-radius:12px;font-size:12px;margin-bottom:14px}.source{font-size:11px;color:var(--muted);margin-top:14px}.pill{font-size:11px;padding:3px 7px;border-radius:99px;background:#f0ede7;color:#68635b}.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media(max-width:800px){.grid{grid-template-columns:1fr}.add{grid-template-columns:1fr 85px 48px}.add .primary{grid-column:auto}.meal-row{grid-template-columns:1fr 85px 70px 32px}.wrap{padding:15px}.top{display:block}.export-controls{grid-template-columns:1fr}.export-controls button{width:100%}}
 
 @media(max-width:800px){.grid>main,.grid>aside{min-width:0}.add{grid-template-columns:85px minmax(0,1fr) 48px}.add .typeahead{grid-column:1/-1}.add>*{min-width:0}}
+
+@media(max-width:400px){.add{grid-template-columns:minmax(0,1fr) 48px}.add #grams{grid-column:1/-1}.symptoms,.chart-controls{grid-template-columns:minmax(0,1fr)}.symptoms>*{min-width:0}.symptoms input,.symptoms select{max-width:100%}.gglasses{grid-template-columns:repeat(2,minmax(0,1fr))}}
 </style></head>
 <body><div class="wrap">
 <div class="top"><div><h1>FODMAP-конструктор</h1><div class="sub">Соберите приём пищи по граммам. Цвет продукта меняется с порцией, а каждая FODMAP-группа считается отдельно — приложение показывает, какая именно наполняется, и что можно добавить, оставшись в low-FODMAP.</div></div><span class="pill">локально • данные сохраняются в браузере</span></div>