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;