2059425 - [Nova] The height of the search results do not match Figma specifications in compact mode

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Simona Badau, Desktop QA]

Attachment: Screenshot with the search result heights on macOS

Found in

• Nightly 155.0a1

Affected versions

• Nightly 155.0a1

Tested platforms

• Affected platforms: Windows 11 x64, macOS 26.04, Ubuntu 24.04

Preconditions

• Enable Compact density in about:preferences#appearance.
• Enable the Browser Toolbox by setting devtools.chrome.enabled = true, devtools.debugger.remote-enabled = true
• Do some searches beforehand.

Steps to reproduce

1. Click the Address Bar and start a search.
2. Observe the Firefox Suggest results.
3. Inspect the height of a search results using the Browser Toolbox.
4. Resize the Firefox window until two-line search results are displayed in the search dropdown.
5. Inspect the height of a search results using the Browser Toolbox.

Expected result

• The search result height should be 28px for single line results and 58px for two lines results, according to the Figma specifications.

Actual result

• The search results height is aprox as follows:

• macOS 26 - 35px (single line) and 53px (two lines)
• Windows 11 - 37px (single line) and 55px (two lines).
• Ubuntu 26 - 43px (single line) and 63px (two lines).

Regression range

• This is not a regression, it was implemented with the compact mode styling done in Bug 2030953.

Comment 1

[Simona Badau, Desktop QA]

Attachment: Screenshot with the Quick search results

The Quick Search results also do not match the Figma specifications. In Nightly, on macOS, their height is 70px instead of the expected 58px.

Comment 2

[Stephen Thompson [:sthompson]]

Hi :adw, flagging this as another compact UI density difference with the spec. I'm happy for your team to prioritize and use sizes that make sense for you. Please let me and Eric Pang (UX) know if the compact mode spec should change to reflect any decisions you make.

Comment 3

[Drew Willcoxon :adw]

The other compact mode bug 2059031 is the first time I've seen this Figma, with two weeks to go lol. I guess we have some work to do.

Comment 4

[Stephen Thompson [:sthompson]]

Sorry that the handoff ended up looking like this. Personally, I assumed that the address bar designs for Nova would account for compact mode since this module has had CSS rules for it. I'll provide feedback to our team.

Comment 5

[Drew Willcoxon :adw]

Thank you both. Stephen, I did some investigating. Could you let me know what you think please?

First some background. In the implementation, the row height is determined by the text size plus block padding. For multi-line rows, there's also the spacing between the lines. The block padding is --urlbarview-row-padding-block, which is defined as --space-small, which is 0.5rem regardless of compact mode. The next smallest space/dimension size is 0.25rem, which is quite small.

We do set a min-height in terms of px on rows, but I think the actual row height should be based on text size and text-relative padding (e.g. rem), rather than a hardcoded px value, since that's much more adaptive.

Part of the discrepency seems to be due to the fact that the Figma uses a larger text size. Titles are 15px and secondary text is 13px. The implementation uses 1.15em, which on my Windows 11 ends up being ~12.5px and ~10.7px. I'm testing with Windows scaling set to 350% in a VM on a high-DPI Mac display.

(In reply to Simona Badau, Desktop QA from comment #0)

Actual result

• The search results height is aprox as follows:
  macOS 26 - 35px (single line)

On Mac, the visible height of a single-line row is 30.25px. I do see the 35px number, but that includes the row's block margin (actually a transparent border). So for example when the row is selected or moused over, the visible selection height is 30.25px, according to the inspector.

Windows 11 - 37px (single line)

I'm seeing a different number on Windows: 33.8776px, maybe because of scaling. That includes the transparent border. The actual visible row height is 28.4667px.

• Windows 11 - [...] 55px (two lines).

Re: rows with two-line height, there are two kinds: (1) rows with URLs, which wrap onto a second line below the title when the window is narrow; (2) rows that naturally have two lines, like rich search engine suggestions. On my Windows, the first kind is 42.8667px and the second kind is 45.4px. Both are smaller than the 58px height in the Figma.

Re: quick suggest rows like the stock market suggestion in the Figma, we can remove the extra padding around the icon like the Figma shows.

So in summary, I think the only action we need to take is adjusting the quick suggest rows. Does that sound OK?

One other thing. The Figma is inconsistent with other direction we've gotten from Paul about compact mode. In particular the breakout is not supposed to extend above and to the sides of the input. As an implementor it's hard to tell what I should take as truth.

Comment 6

[Drew Willcoxon :adw]

I asked Paul about this on Slack and he said:

I'll speak with Eric about this as he's worked on these independently. I don't think we have these compact mode styles in our Figma components either.

I think this is relatively low priority as it has low user numbers, but I do think moving to the compact version that has no padding around the icon looks good.

The last part is about quick suggest rows like the stock market suggestion (and other top-pick rows).

AshleyT replied and pointed out:

Thanks for looking at this. Compact mode has low numbers today as it's not officially supported, but we're bringing it into settings with Nova and turning is on by default for users with low screen resolutions to maximize the space for web content, so usage it about to jump up

Comment 7

[Drew Willcoxon :adw]

Attachment: Bug 2059425 - [Nova] Reduce the padding of urlbar realtime suggestions in compact mode.

Comment 8

[Drew Willcoxon :adw]

(In reply to Drew Willcoxon :adw from comment #6)

I asked Paul about this on Slack and he said:

More Slack discussion:

Me:

Which do you prefer in this case, (1) the icon left-aligned with other icons in the panel as usual, or (2) left-aligned with the selection/hover rect (since now the selection doesn’t extend beyond the left edge of the icon)?

Eric’s Figma goes with option 2

Paul:

Yeah I agree with Eric that it should align with the hover state. Thanks for checking!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/b223385e4a4d
https://hg.mozilla.org/integration/autoland/rev/c39c1f27354f
[Nova] Reduce the padding of urlbar realtime suggestions in compact mode. r=dao,desktop-theme-reviewers,urlbar-reviewers

Comment 10

[Drew Willcoxon :adw]

The only change I landed was to reduce the padding of realtime Suggest suggestions, like stock-market suggestions, in compact mode. Screenshots here: https://phabricator.services.mozilla.com/D316102#10970453

I'm not planning on making any other changes.

Comment 11

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/c39c1f27354f

Comment 12

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2026-07-30 Firefox Nightly build on Windows 10.
Verified as fixed on Firefox Nightly 155.0a1 on Windows 10, Ubuntu 22, macOS 13.

We can confirm that the Quick Results in Compact Mode match the screenshots found in the bug’s commit.

Currently these are the height values for the address bar suggestions:

• Quick Results: 60 px
• Search suggestions - single row: 36 px
• Search suggestions - double row: 56 px

Note that these is a slight 1-2 px difference between Windows, macOS and Ubuntu.

Can you please confirm whether the current height of the search suggestions is going to undergo changes in the future? Should we treat the current implementation as expected values/results for the following Nova testing round?

Thank you!

Comment 13

[Drew Willcoxon :adw]

There aren't any planned changes but I can't guarantee the exact pixel heights will stay the same because the implementation doesn't clamp the height to any exact pixel size, it's based on text height, padding, margins, etc., so if we end up fixing some bug that affects any of that, the heights might end up changing slightly again.