From cc8b10dadbe85c309074d354f9d376afd4bc828c Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Sat, 7 Feb 2026 22:54:12 +0300
Subject: [PATCH] mid update

---
 styles.css | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/styles.css b/styles.css
index db9ead4..492d81d 100644
--- a/styles.css
+++ b/styles.css
@@ -163,8 +163,7 @@ body {
 }
 
 .container.timeline-mode .month-navigator {
-    visibility: hidden;
-    pointer-events: none;
+    display: none;
 }
 
 .container.timeline-mode .chart-wrapper {
@@ -465,7 +464,7 @@ body {
 
     .container.timeline-mode .chart-wrapper {
         width: 100%;
-        height: calc(100dvh - 130px);
+        height: calc(100dvh - 130px - env(safe-area-inset-bottom));
     }
 
     .top-item-amount {
@@ -612,6 +611,79 @@ body {
     }
 }
 
+/* Landscape phones: revert to desktop-like layout */
+@media (max-width: 850px) and (orientation: landscape) {
+    .view-switcher {
+        position: static;
+        background: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        padding: 0;
+        border-top: none;
+        display: inline-flex;
+        gap: 4px;
+    }
+
+    .view-switcher-btn {
+        flex: none;
+        max-width: none;
+        padding: 4px 8px;
+        border-radius: 0;
+        border-bottom: 2px solid transparent;
+        font-weight: normal;
+        color: #999;
+        background: none;
+    }
+
+    .view-switcher-btn.active {
+        color: #333;
+        background: none;
+        border-bottom-color: #333;
+    }
+
+    .container {
+        padding: 6px 12px;
+        padding-bottom: 6px;
+    }
+
+    .header {
+        flex-direction: row;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 4px;
+    }
+
+    .month-navigator {
+        max-width: 60%;
+        width: auto;
+    }
+
+    .content-wrapper {
+        flex-direction: row;
+    }
+
+    .chart-wrapper {
+        width: 65%;
+        height: calc(100dvh - 50px);
+    }
+
+    #details-box {
+        position: relative;
+        top: 0;
+        right: 0;
+        width: 35%;
+        min-width: auto;
+        margin-top: 0;
+        max-height: calc(100dvh - 50px);
+        overflow-y: auto;
+    }
+
+    .container.timeline-mode .chart-wrapper {
+        width: 100%;
+        height: calc(100dvh - 50px);
+    }
+}
+
 /* Eye button for transaction details */
 .eye-btn {
     opacity: 0;