From 7e87a03b9015f3d101210e7d723296346ccac98c Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Sun, 8 Feb 2026 00:48:50 +0300
Subject: [PATCH] Fix home icon centering, eye icons on touch, tune landscape
 layout

- Center donut at 50% for compact landscape phones (was ~47%, misaligned
  with CSS center-label)
- Show eye buttons on touch devices via @media (pointer: coarse)
- Reduce right padding to 34px, narrow chart-wrapper to 49%

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app.js     |  4 ++--
 styles.css | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app.js b/app.js
index 8812a1d..c257430 100644
--- a/app.js
+++ b/app.js
@@ -2815,8 +2815,8 @@ function adjustChartSize() {
 
     // Calculate center position
     let centerPosition;
-    if (screenWidth <= 850) {
-        // Stacked layout: center the chart since details box is below
+    if (screenWidth <= 850 || isCompact) {
+        // Stacked layout or compact landscape: center the chart
         centerPosition = 50;
     } else if (screenWidth >= 1000) {
         centerPosition = 50;
diff --git a/styles.css b/styles.css
index 4cc30d5..77235a4 100644
--- a/styles.css
+++ b/styles.css
@@ -654,7 +654,7 @@ body {
         padding-top: calc(4px + env(safe-area-inset-top));
         padding-bottom: 4px;
         padding-left: 24px;
-        padding-right: 42px;
+        padding-right: 34px;
     }
 
     .header {
@@ -766,11 +766,11 @@ body {
 
     .container {
         padding-left: 24px;
-        padding-right: 42px;
+        padding-right: 34px;
     }
 
     .chart-wrapper {
-        width: 52%;
+        width: 49%;
         height: calc(100dvh - 50px);
     }
 
@@ -778,7 +778,7 @@ body {
         width: 40vw;
         padding: 10px;
         max-height: calc(100dvh - 50px);
-        right: 42px;
+        right: 34px;
     }
 
     .details-header {
@@ -846,6 +846,13 @@ body {
     }
 }
 
+@media (pointer: coarse) {
+    .eye-btn,
+    .header-eye-btn {
+        opacity: 0.5;
+    }
+}
+
 /* Floating eye button on chart (shown when hovering over sunburst sector) */
 .chart-eye-btn {
     position: absolute;