From 99b6ef9374d4bebd4310cb16f6dd62b0d84cbd71 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Thu, 20 Feb 2025 13:24:00 +0100
Subject: [PATCH] Made urlbar fully floating, much better experience now

---
 .../content/zen-styles/zen-compact-mode.css     | 17 +++--------------
 .../base/content/zen-styles/zen-urlbar.css      | 11 +++++------
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css
index ad406bdaf..db3095080 100644
--- a/src/browser/base/content/zen-styles/zen-compact-mode.css
+++ b/src/browser/base/content/zen-styles/zen-compact-mode.css
@@ -58,10 +58,6 @@
       &:not([zen-right-side='true']) #nav-bar {
         margin-left: 0 !important;
       }
-
-      & #urlbar[open]:not([zen-floating-urlbar='true']) {
-        top: 0 !important;
-      }
     }
 
     &:not([zen-right-side='true']) #navigator-toolbox {
@@ -109,11 +105,12 @@
         background: var(--zen-main-browser-background-toolbar) !important;
         background-attachment: fixed !important;
         background-size: 2000px !important; /* Dont ask me why */
-        backdrop-filter: blur(5px) !important;
+        /* NOTE: We MUST not add a backdrop-filter if we want the URL
+         * bar to be floating correctly: 
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block */
       }
 
       & #urlbar[open][zen-floating-urlbar='true'] {
-        --zen-urlbar-offset: var(--zen-sidebar-width);
         transition: left 0.05s ease;
 
         #navigator-toolbox:has(&) {
@@ -261,10 +258,6 @@
             right: -1px;
             left: auto;
           }
-
-          & #urlbar[open][zen-floating-urlbar='true'] {
-            --zen-urlbar-offset: 0px;
-          }
         }
       }
     }
@@ -347,10 +340,6 @@
 
         & #urlbar {
           transform: translateY(0);
-
-          &[open]:not([zen-floating-urlbar='true']) {
-            top: 0 !important;
-          }
         }
 
         &::before {
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index e977c990f..7f9bfc3cc 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -416,22 +416,21 @@ button.popup-notification-dropmarker {
   min-width: 45vw !important;
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
-  position: absolute;
+  position: fixed;
 
   font-size: 1.15em !important;
   @media (-moz-platform: macos) {
     font-size: 1.5em !important;
   }
-  top: calc(var(--zen-toolbar-height) * 2) !important;
-
-  --zen-urlbar-center: calc(var(--zen-urlbar-offset, 0px) + 28vw);
+  top: 50% !important;
+  transform: translate(-50%, -50%);
 
   :root[zen-right-side='true'] & {
-    right: var(--zen-urlbar-center) !important;
+    right: 50% !important;
   }
 
   :root:not([zen-right-side='true']) & {
-    left: var(--zen-urlbar-center) !important;
+    left: 50% !important;
   }
 
   #urlbar-container:has(&) {