anton/visual-spending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Narrower donut container and safe-area side padding for landscape phones

Browse Source 
- Chart wrapper 52% (was 58%) for visual separation from details box
- Container padding 20px + safe-area-inset on both sides to clear
  Dynamic Island in landscape
- Details box right offset includes safe-area-inset-right

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-02-07 23:42:07 +03:00
parent 4508a0f143
commit 2d8cf00c3b
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
styles.css
View File

@ -747,8 +747,13 @@ body {
display: none; display: none;
} }
.container {
padding-left: calc(20px + env(safe-area-inset-left));
padding-right: calc(20px + env(safe-area-inset-right));
}
.chart-wrapper { .chart-wrapper {
width: 58%; width: 52%;
height: calc(100dvh - 50px); height: calc(100dvh - 50px);
} }
@ -756,7 +761,7 @@ body {
width: 40vw; width: 40vw;
padding: 10px; padding: 10px;
max-height: calc(100dvh - 50px); max-height: calc(100dvh - 50px);
right: 4px; right: calc(4px + env(safe-area-inset-right));
} }
.details-header { .details-header {