From aaa05bf2c9033c0f425d746e6b043d44cf27577b Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Sun, 1 Feb 2026 15:08:08 +0300
Subject: [PATCH] Fix center label positioning in responsive layout

Added chart-wrapper div to contain both chart-container and center-label,
allowing the center-label to be positioned relative to the chart area
regardless of the overall layout (side-by-side or stacked).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 24 +++++++++++++-----------
 styles.css | 14 ++++++++++----
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 86fe9f6..ca0d1f3 100644
--- a/index.html
+++ b/index.html
@@ -20,18 +20,20 @@
             <select id="month-select" style="display: none;"></select>
         </div>
         <div class="content-wrapper">
-            <div id="chart-container"></div>
-            <div id="center-label" class="center-label">
-                <div class="center-month"></div>
-                <div class="center-category"></div>
-                <div class="center-amount"><span class="center-amount-num"></span><span class="center-rub"></span></div>
+            <div class="chart-wrapper">
+                <div id="chart-container"></div>
+                <div id="center-label" class="center-label">
+                    <div class="center-month"></div>
+                    <div class="center-category"></div>
+                    <div class="center-amount"><span class="center-amount-num"></span><span class="center-rub"></span></div>
+                </div>
+                <button id="chart-eye-btn" class="chart-eye-btn" title="View transactions">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                        <circle cx="12" cy="12" r="3"/>
+                    </svg>
+                </button>
             </div>
-            <button id="chart-eye-btn" class="chart-eye-btn" title="View transactions">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                    <circle cx="12" cy="12" r="3"/>
-                </svg>
-            </button>
             <div id="details-box" class="details-box">
                 <div id="details-header" class="details-header">
                     <span class="hover-name">Hover over a segment to see details</span>
diff --git a/styles.css b/styles.css
index 4444010..82bfaca 100644
--- a/styles.css
+++ b/styles.css
@@ -132,9 +132,15 @@ body {
     position: relative;
 }
 
-#chart-container {
+.chart-wrapper {
+    position: relative;
     width: 70%;
     height: 80vh;
+}
+
+#chart-container {
+    width: 100%;
+    height: 100%;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -143,7 +149,7 @@ body {
 /* Center label overlay */
 .center-label {
     position: absolute;
-    left: 35%; /* Half of chart-container width (70% / 2) */
+    left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     text-align: left;
@@ -329,9 +335,9 @@ body {
         flex-direction: column;
     }
 
-    #chart-container {
+    .chart-wrapper {
         width: 100%;
-        height: 90lvw
+        height: 90lvw;
     }
 
     #details-box {