From 818276d60c5f66c78a4c4d49565772f28fb23d59 Mon Sep 17 00:00:00 2001
From: 4aiman <konsorumaniakku@ya.ru>
Date: Fri, 29 May 2026 14:55:59 +0300
Subject: [PATCH] Merge two nutrient strips into one: scroll collapsed, wrap
 expanded

Was: upper micro-strip (supplements only, scroll) + lower nutrient-strip
(food+supps, expand). Now: ONE strip at top that does both.

Collapsed: horizontal scroll, single row, no wrap.
Tap: expands to full wrap view showing all nutrients.
Tap again: collapses back to scroll row.

Data source: food (product micronutrients on-the-fly) + supplements.
Sorted by % RDI ascending (most deficient first).

Removed: buildMicroStrip() call, .micro-strip element, old scroll handler.
---
 frontend/css/styles.css |  8 ++++++--
 frontend/js/main.js     | 12 +++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/css/styles.css b/frontend/css/styles.css
index b3e822f..69863f9 100644
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -1454,10 +1454,14 @@ select {
   padding: 8px 14px;
   cursor: pointer;
 }
+/* Collapsed: single scrollable row */
 .nutrient-strip.nutrient-collapsed {
-  max-height: 36px;
-  overflow: hidden;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
 }
+.nutrient-strip.nutrient-collapsed::-webkit-scrollbar { display: none; }
 .nut-item {
   font-size: 12px;
   padding: 3px 8px;
diff --git a/frontend/js/main.js b/frontend/js/main.js
index 84015d3..1199c35 100644
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -253,7 +253,7 @@ async function renderToday(container) {
 
     <div class="balance-trend" id="balance-trend"></div>
 
-    ${buildMicroStrip(suppTotals)}
+    <div class="nutrient-strip nutrient-collapsed" id="daily-nutrients"></div>
 
     <section class="log-section">
       <div class="section-header"><h3>Вес</h3>
@@ -336,10 +336,7 @@ async function renderToday(container) {
       </ul>
     </section>
 
-    <section class="log-section">
-      <div class="section-header"><h3>Нутриенты</h3></div>
-      <div class="nutrient-strip nutrient-collapsed" id="daily-nutrients"></div>
-    </section>
+    <!-- nutrient strip moved to top (after balance trend) -->
 
     <section class="log-section">
       <div class="section-header"><h3>Сон</h3>
@@ -421,10 +418,7 @@ async function renderToday(container) {
     } catch (e) { console.error("[7d trend]", e); }
   })();
 
-  const strip = container.querySelector(".micro-strip");
-  if (strip) strip.onwheel = e => { e.preventDefault(); strip.scrollLeft += e.deltaY; };
-
-  // Fill daily nutrient totals section (sorted by deficiency, lowest first)
+  // Fill nutrient strip (top of page, sorted by deficiency)
   const dailyNutEl = container.querySelector("#daily-nutrients");
   if (dailyNutEl) {
     const nutrients = calcDailyNutrients(food, suppTotals);