Bug 1584253 - Better narrow-window layout for the address bar one-off buttons. r=dao

Differential Revision: https://phabricator.services.mozilla.com/D50053

--HG--
extra : moz-landing-system : lando

browser/components/search/content/search-one-offs.js

@@ -21,12 +21,14 @@ class SearchOneOffs {
       <hbox class="search-panel-one-offs-header search-panel-header search-panel-current-input">
         <label class="search-panel-one-offs-header-label" data-l10n-id="search-one-offs-with-title"/>
       </hbox>
-      <hbox class="search-panel-one-offs" role="group"/>
+      <box class="search-panel-one-offs-container">
+        <hbox class="search-panel-one-offs" role="group"/>
+        <hbox class="search-one-offs-spacer"/>
+        <button class="searchbar-engine-one-off-item search-setting-button-compact" data-l10n-id="search-one-offs-change-settings-compact-button"/>
+      </box>
       <vbox class="search-add-engines"/>
-      <hbox class="search-one-offs-spacer"/>
-      <button class="searchbar-engine-one-off-item search-setting-button-compact" data-l10n-id="search-one-offs-change-settings-compact-button"/>
       <button class="search-setting-button" data-l10n-id="search-one-offs-change-settings-button"/>
-      <box style="visibiltiy:collapse">
+      <box>
         <menupopup class="search-one-offs-context-menu">
           <menuitem class="search-one-offs-context-open-in-new-tab" data-l10n-id="search-one-offs-context-open-new-tab"/>
           <menuitem class="search-one-offs-context-set-default" data-l10n-id="search-one-offs-context-set-as-default"/>

browser/themes/shared/searchbar.inc.css

@@ -62,12 +62,17 @@
   border-bottom: 1px solid var(--panel-separator-color);
 }
 
+.search-panel-one-offs,
+.search-panel-one-offs-container {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
 .search-panel-one-offs {
   margin: 0 !important;
   /* Bug 1108841: prevent font-size from affecting the layout */
   line-height: 0;
-  display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
 }
 
@@ -207,6 +212,7 @@
   max-height: 32px;
   /* For alignment with the Urlbar Go button. */
   margin-inline-end: -2px !important;
+  align-self: end;
 }
 
 .search-setting-button:hover,

browser/themes/shared/urlbar-autocomplete.inc.css

@@ -384,6 +384,7 @@
   display: flex;
   align-items: start;
   padding-block: 16px;
+  flex-wrap: wrap;
 }
 
 .urlbarView.megabar .search-one-offs {
@@ -395,11 +396,9 @@
   padding-inline-end: var(--item-padding-end, 5px);
 }
 
-#urlbar .search-panel-one-offs {
-  padding-inline-start: 12px;
-  /* Make sure we can fit at least three buttons horizontally. */
-  min-width: 120px;
-  box-sizing: content-box;
+#urlbar .search-panel-one-offs-container {
+  /* Make sure horizontally we can fit three buttons, empty space, settings. */
+  min-width: 200px;
 }
 
 #urlbar .search-panel-header {
@@ -411,6 +410,8 @@
 }
 
 #urlbar .search-panel-one-offs-header-label {
+  white-space: nowrap;
+  padding-inline-end: 12px;
   margin: 0;
 }