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>
This commit is contained in:
Anton Volnuhin 2026-02-08 00:48:50 +03:00
parent 3d7dc24a2d
commit 7e87a03b90
2 changed files with 13 additions and 6 deletions

4
app.js
View File

@ -2815,8 +2815,8 @@ function adjustChartSize() {
// Calculate center position // Calculate center position
let centerPosition; let centerPosition;
if (screenWidth <= 850) { if (screenWidth <= 850 || isCompact) {
// Stacked layout: center the chart since details box is below // Stacked layout or compact landscape: center the chart
centerPosition = 50; centerPosition = 50;
} else if (screenWidth >= 1000) { } else if (screenWidth >= 1000) {
centerPosition = 50; centerPosition = 50;

View File

@ -654,7 +654,7 @@ body {
padding-top: calc(4px + env(safe-area-inset-top)); padding-top: calc(4px + env(safe-area-inset-top));
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 24px; padding-left: 24px;
padding-right: 42px; padding-right: 34px;
} }
.header { .header {
@ -766,11 +766,11 @@ body {
.container { .container {
padding-left: 24px; padding-left: 24px;
padding-right: 42px; padding-right: 34px;
} }
.chart-wrapper { .chart-wrapper {
width: 52%; width: 49%;
height: calc(100dvh - 50px); height: calc(100dvh - 50px);
} }
@ -778,7 +778,7 @@ body {
width: 40vw; width: 40vw;
padding: 10px; padding: 10px;
max-height: calc(100dvh - 50px); max-height: calc(100dvh - 50px);
right: 42px; right: 34px;
} }
.details-header { .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) */ /* Floating eye button on chart (shown when hovering over sunburst sector) */
.chart-eye-btn { .chart-eye-btn {
position: absolute; position: absolute;