feat: Dynamically resize the urlbar based on the view width, b=no-bug, c=common

src/browser/app/profile/features.inc

@@ -20,6 +20,7 @@ pref('zen.mediacontrols.enabled', true);
 pref('zen.haptic-feedback.enabled', true);
 
 #include features/mods.inc
+#include features/theme.inc
 #include features/compact-mode.inc
 #include features/urlbar.inc
 #include features/glance.inc

src/zen/common/ZenUIManager.mjs

@@ -82,6 +82,7 @@ var gZenUIManager = {
       '--zen-urlbar-top',
       `${window.innerHeight / 2 - Math.max(kUrlbarHeight, gURLBar.textbox.getBoundingClientRect().height) / 2}px`
     );
+    gURLBar.textbox.style.setProperty('--zen-urlbar-width', `${window.innerWidth / 2}px`);
     gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
     gZenVerticalTabsManager.recalculateURLBarHeight();
     if (!this._preventToolbarRebuild) {

src/zen/common/styles/zen-urlbar.css

@@ -467,11 +467,11 @@ button.popup-notification-dropmarker {
 #urlbar[open][zen-floating-urlbar='true'] {
   z-index: 1000;
   max-width: unset;
-  min-width: unset !important;
   --urlbar-container-height: 55px !important;
   --urlbar-margin-inline: 10px !important;
 
-  width: min(90%, 50rem) !important;
+  min-width: min(90%, 50rem) !important;
+  width: var(--zen-urlbar-width, min(90%, 50rem)) !important;
   font-size: 1.15em !important;
   @media (-moz-platform: macos) {
     font-size: 1.5em !important;