From 56e65f27ac9abaeadc463291cbfe691c42242483 Mon Sep 17 00:00:00 2001
From: s0lray <s0lray@users.noreply.github.com>
Date: Thu, 26 Mar 2026 18:24:44 -0400
Subject: [PATCH] Center title and maximize tree viewport on mobile (THE-118)

- Use position:absolute for theme toggle so title centers naturally
- Reduce search bar padding on mobile for more vertical space
- Add min-height: 60vh on SVG to ensure tree fills viewport
- Desktop layout unchanged

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

diff --git a/public/css/arf.css b/public/css/arf.css
index b539fce..b0f6f03 100644
--- a/public/css/arf.css
+++ b/public/css/arf.css
@@ -284,11 +284,9 @@ a {
 @media (max-width: 768px) {
   #header {
     font-size: var(--font-size-lg);
-    top: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-3);
+    top: 0;
+    position: relative;
+    text-align: center;
     padding: var(--space-2) var(--space-3);
   }
 
@@ -296,12 +294,12 @@ a {
     display: none;
   }
 
-  #header-title {
-    flex: 1;
-  }
-
   #mobile-theme-toggle {
     display: inline-block;
+    position: absolute;
+    right: var(--space-3);
+    top: 50%;
+    transform: translateY(-50%);
     background: none;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-sm);
@@ -311,7 +309,6 @@ a {
     padding: var(--space-1) var(--space-2);
     cursor: pointer;
     white-space: nowrap;
-    flex-shrink: 0;
   }
 
   #mobile-theme-toggle:hover {
@@ -319,6 +316,15 @@ a {
     border-color: var(--color-text-secondary);
   }
 
+  #search-container {
+    padding: var(--space-1) 0;
+  }
+
+  #search-input {
+    padding: var(--space-1) var(--space-2);
+    font-size: 13px;
+  }
+
   /* Hide legend and notes content on mobile */
   .legend {
     display: none;
@@ -328,6 +334,11 @@ a {
     display: none;
   }
 
+  /* Maximize SVG tree viewport */
+  svg {
+    min-height: 60vh;
+  }
+
   /* Floating notes button */
   #mobile-notes-btn {
     display: block;