From 23f5ce8b1a7bac987e3cc8245f179b81478f818a Mon Sep 17 00:00:00 2001
From: aaverbitskiy <aaverbitskiy@gmail.com>
Date: Tue, 21 Jul 2026 10:24:07 +0000
Subject: [PATCH] =?UTF-8?q?header=20layout:=20checkbox=20column=20(3=20row?=
 =?UTF-8?q?s),=20=D0=9E=D1=84=D0=BE=D1=80=D0=BC=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20under=20scale=20slider,=20counters=20as=20inline=20gra?=
 =?UTF-8?q?y=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html     |  9 ++++++---
 frontend/src/styles.css | 23 ++++++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index e75d476..0136314 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -82,8 +82,8 @@
     </div>
   </div>
 
-  <!-- Group 4: appearance settings -->
-  <div class="hgroup">
+  <!-- Group 4: appearance settings (button stacked under the scale slider) -->
+  <div class="hgroup hgroup-scale">
     <div class="field zoom-field">
       <label for="zoom-slider">Масштаб: <span id="zoom-label">12 месяцев</span></label>
       <input type="range" id="zoom-slider" min="0" max="9" step="1" value="3" />
@@ -94,7 +94,10 @@
     </div>
   </div>
 
-  <div id="status"></div>
+  <!-- Group 5: counters, boxed inline with the other gray blocks -->
+  <div class="hgroup hgroup-status">
+    <div id="status"></div>
+  </div>
 </header>
 
 <div id="chart-wrap">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3f624a8..a0c6627 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -56,14 +56,16 @@ input[type=date] {
   min-width: 180px;
   box-sizing: border-box;
 }
-/* Compact 2-column layout for the checkbox group. */
+/* Compact single-column layout: the three checkboxes stack in three rows so the
+   block takes as little horizontal space as possible. */
 .hgroup-checks {
-  display: grid;
-  grid-template-columns: auto auto;
-  column-gap: 18px;
-  row-gap: 4px;
-  align-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 6px;
 }
+.hgroup-checks .checkbox-field { align-self: flex-start; }
 
 .brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
 .brand-name { font-size: 18px; font-weight: 700; white-space: nowrap; }
@@ -78,7 +80,14 @@ input[type=text] {
   font-size: 13px;
   min-width: 180px;
 }
-#status { font-size: 12px; color: #888; margin-left: auto; align-self: center; line-height: 1.4; text-align: right; }
+/* Counters as a compact gray block, pushed to the end of the header row so it
+   sits in line with the other boxed groups instead of floating below. */
+.hgroup-status { margin-left: auto; align-items: center; }
+#status { font-size: 12px; color: #888; line-height: 1.4; white-space: nowrap; }
+
+/* Scale group: stack the "Оформление" button under the zoom slider. */
+.hgroup-scale { flex-direction: column; align-items: flex-start; gap: 10px; }
+.hgroup-scale .decor-wrap { align-self: flex-start; }
 
 .checkbox-field { flex-direction: row; align-items: center; gap: 6px; align-self: center; }
 .checkbox-field label {