From 3d7dc24a2dae1a18d4671659fd3810160d683971 Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Sun, 8 Feb 2026 00:44:21 +0300
Subject: [PATCH] Landscape phone polish: fixed padding, compact header,
 cache-busting

- Replace safe-area-inset padding with fixed 42px right / 24px left
  (safe-area was 59px on both sides of iPhone Pro Max, too aggressive)
- Move center-label/eye-button hiding to height-based media query
  covering all landscape phones, not just >851px
- Add compact h1 (24px), smaller month-preview donuts (28px) for
  larger landscape phones
- Server: add Cache-Control: no-cache, strip query strings from URLs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server.js  |  7 ++++---
 styles.css | 31 ++++++++++++++++++++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/server.js b/server.js
index d42cc91..a9f2096 100644
--- a/server.js
+++ b/server.js
@@ -39,8 +39,9 @@ const server = http.createServer((req, res) => {
         return;
     }
 
-    // Handle URL
-    let filePath = '.' + req.url;
+    // Handle URL (strip query string)
+    const urlPath = req.url.split('?')[0];
+    let filePath = '.' + urlPath;
     if (filePath === './') {
         filePath = './index.html';
     } else if (filePath.endsWith('.csv')) {
@@ -62,7 +63,7 @@ const server = http.createServer((req, res) => {
             return;
         }
 
-        res.writeHead(200, { 'Content-Type': contentType });
+        res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-cache' });
         res.end(data);
     });
 });
diff --git a/styles.css b/styles.css
index 858a6e0..4cc30d5 100644
--- a/styles.css
+++ b/styles.css
@@ -653,8 +653,8 @@ body {
         padding: 4px 10px;
         padding-top: calc(4px + env(safe-area-inset-top));
         padding-bottom: 4px;
-        padding-left: calc(10px + env(safe-area-inset-left));
-        padding-right: calc(10px + env(safe-area-inset-right));
+        padding-left: 24px;
+        padding-right: 42px;
     }
 
     .header {
@@ -725,8 +725,8 @@ 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) {
+/* All landscape phones: compact center label, hide eye button */
+@media (max-height: 500px) and (orientation: landscape) {
     .center-label {
         display: none;
     }
@@ -747,9 +747,26 @@ body {
         display: none;
     }
 
+    .chart-eye-btn {
+        display: none !important;
+    }
+}
+
+/* Larger landscape phones (e.g. iPhone Pro Max ~956×440): tighter details */
+@media (min-width: 851px) and (max-height: 500px) and (orientation: landscape) {
+    h1 {
+        font-size: 24px;
+        white-space: nowrap;
+    }
+
+    .month-preview {
+        width: 28px;
+        height: 28px;
+    }
+
     .container {
-        padding-left: env(safe-area-inset-left, 8px);
-        padding-right: env(safe-area-inset-right, 8px);
+        padding-left: 24px;
+        padding-right: 42px;
     }
 
     .chart-wrapper {
@@ -761,7 +778,7 @@ body {
         width: 40vw;
         padding: 10px;
         max-height: calc(100dvh - 50px);
-        right: calc(4px + env(safe-area-inset-right));
+        right: 42px;
     }
 
     .details-header {