Hi Yaron, if I look at it with the window maximized, which is the usual situation for me, it seems fine:

The outer box around the magnifying glass, text box, and arrow, which is under

toolbar#nav-bar > hbox#nav-bar-customization-target > toolbaritem#search-container > searchbar#searchbar

has a reported width of 249.6 pixels while the drop-down under

popupset#mainPopupSet > panel#PopupSearchAutoComplete

has a reported width of 249.4 pixels. With subpixel aliasing, any difference is too slight for me to discern.

However, if I switch the window to resizable, there is a visible discrepancy: 151.2px vs. 150px.

(That's on the Layout tab of the Inspector in the Browser Toolbox.)

I don't know how these peculiar widths are determined, but if you are going to override one, you probably should set both to keep them in sync when the window width changes.

You can consider to move the search bar to the overflow area to see whether that gives more width.

That gives me a search bar of about 400px width, even width a small window width.

Hello jscher2000 and cor-el,

Thank you for replying. I appreciate it.

Using an image-editor, the actual difference is 1px.

With

1. PopupSearchAutoComplete { min-width: 305px !important; }

I get the same width for the searchbar and its popup in a maximized window.

Obviously this isn't the best solution. Any other idea?

---

@cor-el,

The problem is in FF 69 *RTL*. The searcher popup is 1px shorter (on the left) than the searcher itself.

Yaron said

With
#PopupSearchAutoComplete { min-width: 305px !important; }
I get the same width for the searchbar and its popup in a maximized window. Obviously this isn't the best solution.

But maybe it's the best available at this time?

The drop-down lives in a completely separate part of the document from the toolbar, so unlike normal HTML layouts where you could use something like

width:100%

to match the width of a parent element, you have no choice but to handle the width using absolute measurements.

Well, you're the expert. :)

Thanks for the detailed explanation.