From 109fdb4672ead90db5910f1a761c6b1fb92e8a3b Mon Sep 17 00:00:00 2001
From: kenji <kenji@hakase>
Date: Mon, 5 Jan 2026 14:48:18 -0600
Subject: [PATCH] style(firefox): improve autohide CSS for web-app profile

Ensures both tabs and address bar hide and reveal together seamlessly.
---
 apps/firefox/profiles/web-app.nix | 69 ++++++++++++++-----------------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/apps/firefox/profiles/web-app.nix b/apps/firefox/profiles/web-app.nix
index 941b824..29b6c96 100644
--- a/apps/firefox/profiles/web-app.nix
+++ b/apps/firefox/profiles/web-app.nix
@@ -70,61 +70,54 @@
   };
 
   userChrome = ''
-    /* --- Floating Autohide Toolbox (Tabs Only) --- */
+    /* --- Floating Autohide Toolbox (Tabs + Address Bar) --- */
+
+    :root {
+      --toolbox-transition-duration: 0.2s;
+      --toolbox-transition-timing-function: ease;
+    }
 
-    /* Take toolbox out of the document flow so web content is 100% height */
     #navigator-toolbox {
       position: fixed !important;
       top: 0;
       left: 0;
       width: 100%;
       z-index: 9999 !important;
-      background-color: var(--toolbar-bgcolor, #1c1b22) !important;
-      
-      /* Start hidden */
+      transition: transform var(--toolbox-transition-duration) var(--toolbox-transition-timing-function) !important;
       transform: translateY(-100%) !important;
       opacity: 0 !important;
-      transition: transform 0.2s ease, opacity 0.2s ease !important;
     }
 
-    /* Trigger zone */
-    #navigator-toolbox::after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      height: 10px;
-      z-index: 10000 !important;
-    }
-
-    /* Reveal when hovering */
-    #navigator-toolbox:hover {
+    /* Reveal on hover */
+    #navigator-toolbox:hover,
+    #navigator-toolbox:focus-within {
       transform: translateY(0) !important;
       opacity: 1 !important;
     }
 
-    /* --- Hide specific bars --- */
-
-    /* Hide Navigation Bar (Address Bar) COMPLETELY */
-    #nav-bar {
-      visibility: collapse !important;
-      height: 0px !important;
-      min-height: 0px !important;
-      padding: 0 !important;
-      margin: 0 !important;
+    /* Trigger zone at top of screen */
+    #navigator-toolbox::after {
+      content: "";
+      position: absolute;
+      top: 100%; /* Below the hidden toolbox */
+      left: 0;
+      width: 100%;
+      height: 5px; /* Size of the trigger area */
+      z-index: 10000 !important;
     }
 
-    /* Hide Bookmarks Toolbar */
+    /* Remove native titlebar so it doesn't mess up height */
+    #titlebar {
+      appearance: none !important;
+      margin-bottom: -10px !important; /* Pull things up if needed */
+    }
+
+    /* Ensure content starts at top of screen */
+    #browser, #appcontent, tabbrowser, #tab-notification-deck {
+      margin-top: 0 !important;
+    }
+
+    /* Hide Bookmarks Toolbar permanently */
     #PersonalToolbar { visibility: collapse !important; }
-
-    /* Hide Titlebar */
-    #titlebar { appearance: none !important; }
-
-    /* Ensure TabsToolbar looks okay on its own */
-    #TabsToolbar {
-      border: none !important;
-      background: transparent !important;
-    }
   '';
 }