From f6ae4aa3dea2c10179f54d313fa5c4c2bda200db Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Sun, 1 Feb 2026 16:12:20 +0300
Subject: [PATCH] Add mobile optimizations: smaller/bolder fonts, hide eye
 icon, center chart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Smaller font sizes on mobile (10px/9px vs 13px/11px on desktop)
- Bolder font weight on mobile (600) for better readability
- Hide chart eye icon on narrow/stacked layouts (≤850px)
- Center chart at 50% when layout is stacked (≤850px)
- Dynamic font size/weight updates on resize

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app.js     | 58 ++++++++++++++++++++++++++++++++++++------------------
 styles.css |  8 ++++++++
 2 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/app.js b/app.js
index 8288b30..f8338bc 100644
--- a/app.js
+++ b/app.js
@@ -463,19 +463,16 @@ function renderChart(data) {
     const screenWidth = window.innerWidth;
     let centerPosition;
 
-    if (screenWidth >= 1000) {
+    if (screenWidth <= 850) {
+        // Stacked layout: center the chart since details box is below
+        centerPosition = 50;
+    } else if (screenWidth >= 1000) {
         // For screens 1000px and wider, keep centered at 50%
         centerPosition = 50;
-    } else if (screenWidth >= 640) {
-        // Gradual transition between 640-1000px
-        const transitionProgress = (screenWidth - 640) / 360; // 0 to 1
-        centerPosition = 40 + (transitionProgress * 10); // 40 to 50
-    } else if (screenWidth <= 500) {
-        // Mobile: center the chart since details box is below
-        centerPosition = 50;
     } else {
-        // For smaller screens (500-640px)
-        centerPosition = 40;
+        // Gradual transition between 850-1000px (side-by-side layout)
+        const transitionProgress = (screenWidth - 850) / 150; // 0 to 1
+        centerPosition = 40 + (transitionProgress * 10); // 40 to 50
     }
 
     // Mobile: scale chart to fill container, hide outside labels
@@ -489,6 +486,13 @@ function renderChart(data) {
     const level3Outer = isMobile ? '100%' : '75%';
     const outerRadius = isMobile ? '100%' : '95%';
 
+    // Smaller font sizes on mobile, bolder for readability
+    const level1FontSize = isMobile ? 10 : 13;
+    const level1LineHeight = isMobile ? 12 : 15;
+    const level1FontWeight = isMobile ? 600 : 500;
+    const level2FontSize = isMobile ? 9 : 11;
+    const level2FontWeight = isMobile ? 600 : 400;
+
     option = {
         backgroundColor: '#fff',
         grid: {
@@ -537,8 +541,9 @@ function renderChart(data) {
                     label: {
                         show: true,
                         rotate: 'radial',
-                        fontSize: 13,
-                        lineHeight: 15,
+                        fontSize: level1FontSize,
+                        lineHeight: level1LineHeight,
+                        fontWeight: level1FontWeight,
                         verticalAlign: 'center',
                         position: 'inside',
                         formatter: function(param) {
@@ -559,7 +564,8 @@ function renderChart(data) {
                             // Show labels for sectors that are at least 5% of the total
                             return param.percent >= 0.05;
                         },
-                        fontSize: 11,
+                        fontSize: level2FontSize,
+                        fontWeight: level2FontWeight,
                         align: 'center',
                         position: 'inside',
                         distance: 5,
@@ -1781,6 +1787,13 @@ function adjustChartSize() {
     const level3Outer = isMobile ? '100%' : '75%';
     const outerRadius = isMobile ? '100%' : '95%';
 
+    // Smaller font sizes on mobile, bolder for readability
+    const level1FontSize = isMobile ? 10 : 13;
+    const level1LineHeight = isMobile ? 12 : 15;
+    const level1FontWeight = isMobile ? 600 : 500;
+    const level2FontSize = isMobile ? 9 : 11;
+    const level2FontWeight = isMobile ? 600 : 400;
+
     // Update layer proportions
     option.series.levels[1].r0 = level1Inner;
     option.series.levels[1].r = level1Outer;
@@ -1790,6 +1803,13 @@ function adjustChartSize() {
     option.series.levels[3].r = level3Outer;
     option.series.radius = [0, outerRadius];
 
+    // Update font sizes and weights
+    option.series.levels[1].label.fontSize = level1FontSize;
+    option.series.levels[1].label.lineHeight = level1LineHeight;
+    option.series.levels[1].label.fontWeight = level1FontWeight;
+    option.series.levels[2].label.fontSize = level2FontSize;
+    option.series.levels[2].label.fontWeight = level2FontWeight;
+
     // Update level 3 labels: hide on mobile, show on desktop (with conditions)
     if (isMobile) {
         option.series.levels[3].label.show = false;
@@ -1806,15 +1826,15 @@ function adjustChartSize() {
 
     // Calculate center position
     let centerPosition;
-    if (screenWidth >= 1000) {
+    if (screenWidth <= 850) {
+        // Stacked layout: center the chart since details box is below
         centerPosition = 50;
-    } else if (screenWidth >= 640) {
-        const transitionProgress = (screenWidth - 640) / 360;
-        centerPosition = 40 + (transitionProgress * 10);
-    } else if (isMobile) {
+    } else if (screenWidth >= 1000) {
         centerPosition = 50;
     } else {
-        centerPosition = 40;
+        // Gradual transition between 850-1000px (side-by-side layout)
+        const transitionProgress = (screenWidth - 850) / 150;
+        centerPosition = 40 + (transitionProgress * 10);
     }
 
     // Update chart center position
diff --git a/styles.css b/styles.css
index db5eddb..edd16ec 100644
--- a/styles.css
+++ b/styles.css
@@ -363,6 +363,10 @@ body {
     .center-label {
         display: none;
     }
+
+    .chart-eye-btn {
+        display: none;
+    }
 }
 
 @media (max-width: 500px) {
@@ -411,6 +415,10 @@ body {
         box-shadow: none;
         border-radius: 0;
     }
+
+    .chart-eye-btn {
+        display: none;
+    }
 }
 
 @media (max-width: 400px) {