From b1ff67beb5427b738c8da07675658c173c2bf906 Mon Sep 17 00:00:00 2001
From: s0lray <s0lray@users.noreply.github.com>
Date: Tue, 24 Mar 2026 19:10:44 -0400
Subject: [PATCH] fix(ui): add mobile media queries for header and legend
 (THE-74)

Reduce #header font-size from 40px to 16px at max-width 768px to
prevent overlap with the D3 tree on narrow screens. Switch .legend
from absolute/fixed-width to relative/auto so it no longer overflows
viewports narrower than 400px.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 public/css/arf.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/public/css/arf.css b/public/css/arf.css
index 913e807..8865ccd 100644
--- a/public/css/arf.css
+++ b/public/css/arf.css
@@ -215,3 +215,19 @@ a {
   color: var(--color-text-secondary);
   text-align: center;
 }
+
+/* === Mobile responsive === */
+@media (max-width: 768px) {
+  #header {
+    font-size: var(--font-size-lg);
+    top: 10px;
+  }
+
+  .legend {
+    position: relative;
+    width: auto;
+    max-width: 100%;
+    padding: var(--space-2) var(--space-3);
+    box-sizing: border-box;
+  }
+}