From 4508a0f143d967457aa3352ee26365fe397930ba Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Sat, 7 Feb 2026 23:38:12 +0300
Subject: [PATCH] Compact donut layout for larger landscape phones (iPhone Pro
 Max)

For viewports >850px wide but <=500px tall (landscape):
- Hide center label text (month/amount), keep home icon on drill-down
- Wider details panel (40vw), smaller fonts (12-13px)
- Tighter spacing to fit all content without clipping

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 styles.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/styles.css b/styles.css
index dd15745..d23d993 100644
--- a/styles.css
+++ b/styles.css
@@ -725,6 +725,68 @@ body {
     }
 }
 
+/* Larger landscape phones (e.g. iPhone Pro Max ~956×440): compact center, tighter details */
+@media (min-width: 851px) and (max-height: 500px) and (orientation: landscape) {
+    .center-label {
+        display: none;
+    }
+
+    .center-label.drilled-down {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .center-label.drilled-down .center-home {
+        display: flex;
+    }
+
+    .center-label.drilled-down .center-month,
+    .center-label.drilled-down .center-category,
+    .center-label.drilled-down .center-amount {
+        display: none;
+    }
+
+    .chart-wrapper {
+        width: 58%;
+        height: calc(100dvh - 50px);
+    }
+
+    #details-box {
+        width: 40vw;
+        padding: 10px;
+        max-height: calc(100dvh - 50px);
+        right: 4px;
+    }
+
+    .details-header {
+        margin-bottom: 6px;
+        padding: 4px 0;
+    }
+
+    .hover-name {
+        font-size: 13px;
+    }
+
+    .hover-amount {
+        font-size: 16px;
+    }
+
+    #details-box h4 {
+        margin: 6px 0 2px;
+        font-size: 11px;
+    }
+
+    .top-item {
+        padding: 3px 0;
+        font-size: 12px;
+    }
+
+    .top-item-amount {
+        font-size: 12px;
+    }
+}
+
 /* Eye button for transaction details */
 .eye-btn {
     opacity: 0;