2054030 - [Nova] Find bar should use min-height instead of height

Status: ASSIGNED

(Toolkit :: UI Widgets, defect, P3)

Description

[Dão Gottwald [:dao]]

Attachment: Screenshot From 2026-07-10 12-52-45.png

Note the vertical scrollbar and cut off input border.

This is on Ubuntu, might be text size related.

Likely regressed by bug 2048907?

Comment 1

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 2048907

:sclements, since you are the author of the regressor, bug 2048907, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 2

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:mstriemer, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 2048907

Comment 4

[Nicolas Chevobbe [:nchevobbe][PTO back September 7]]

I kind of reproduce on my Ubuntu laptop.
I don't see a scrollbar but I can "scroll" the findbar when Nova is enabled (it's quite visible with the elastic scrolling thing).
It seems to be because the hardcoded height we set on the .findbar-container (32px), is smaller than the height of the <input> when Nova is enabled.
The input is taller in Nova because we have padding-block of 0.5rem , while in pre-Nova, it's 2px. So now we're dependent on the font-size, which might differ from one platform to the other.
Setting the height of the .findbar-container to 34px does seem to make the issue go away, but it feels like a bandaid.
An alternative that seems to work is to compute this height from the input height, which might be something like:

height: max(
  calc(
    /* <input> padding-block */
    (var(--space-small) * 2) +
    /* height of the text in the input */
    1lh + 
    /* <input> border-block */
    (1px * 2)
  ),
  /* input min-height */
  28px
);

it does feel a bit brittle (as we're assuming that the input is what drives the height of the findbar, but might work well)
might be a bit easier to reason about once we land the path for Bug 2056829

Comment 5

[Dão Gottwald [:dao]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #4)

It seems to be because the hardcoded height we set on the .findbar-container (32px), is smaller than the height of the <input> when Nova is enabled.

Could we make this a min-height instead or does it need to be height?

The input is taller in Nova because we have padding-block of 0.5rem , while in pre-Nova, it's 2px. So now we're dependent on the font-size, which might differ from one platform to the other.

The vertical padding feels excessive visually, so that's where I would start, rather than making the findbar taller to accommodate. It seems like we're (unintentionally?) picking up the default padding from global-shared.css as findbar.css doesn't override the padding anymore. The default style goes back to bug 1883361; I wonder if we want to make that more compact if we want to rely on it more widely. var(--space-xsmall) looks much more reasonable over here.

Comment 7

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [:dao] from comment #5)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #4)

It seems to be because the hardcoded height we set on the .findbar-container (32px), is smaller than the height of the <input> when Nova is enabled.

Could we make this a min-height instead or does it need to be height?

The input is taller in Nova because we have padding-block of 0.5rem , while in pre-Nova, it's 2px. So now we're dependent on the font-size, which might differ from one platform to the other.

The vertical padding feels excessive visually, so that's where I would start, rather than making the findbar taller to accommodate. It seems like we're (unintentionally?) picking up the default padding from global-shared.css as findbar.css doesn't override the padding anymore. The default style goes back to bug 1883361; I wonder if we want to make that more compact if we want to rely on it more widely. var(--space-xsmall) looks much more reasonable over here.

Bug 2059578 tweaks the padding specifically for the findbar accordingly.

Comment 8

[Daniel Holbert [:dholbert]]

Yup, I think bug 2059578 should fix this (and I just triggered lando over there).

Comment 9

[Sarah Clements [:sclements] | PTO until Sept 8th]

Many thanks for the help all :)

Dao, does this issue look resolved to you?

Comment 10

[Dão Gottwald [:dao]]

Just tested this, it's mostly resolved for me. The input looks proper and the scrollbar is gone. I saw some oddity with the find bar's top border partially disappearing, not sure if that's due to some part still overflowing somehow.

Generally, setting a fixed height (not min-height) on .findbar-container seems like it's going to invite these sort of issues, and unsurprisingly the bug is back if I manually set font-size: 1.5em on the find bar. Could we make it a min-height instead or would that not work with the up and down sliding animation?