Firefox 119: 2Line Megabar: Label for "On device $xy" when you have firefox sync doesn't end up in second line, leading to overlap

[Fuchs]

1. Does the issue occur without any files inside /chrome/ folder?
   No, only with CustomCSSforFx

2. Issue description, userChrome.css/userContent.css 'settings' the issue occurs with and steps to reproduce the issue:
   "./css/locationbar/ac_popup_megabar_title_and_url_two_lines.css";

3. Does the issue occur with the most recent version of CustomCSSforFx (release/test/dev build)?
   Yes, checkout from main from today

4. Screenshots showing the issue (drag & drop images into this post):
   

5. System information

• OS & OS version:
  Linux (Fedora 38)

• DPI/HiDPI/scaling value, if not 100% (e.g. 125%, 150%...):
  happens with both 100% (laptop) and 125% (desktop)

• Firefox version:
  119.0

• Firefox theme (e.g. default, build in light/dark, external theme + link):

• default

Switching to a one-line megabar does "resolve" the issue as in no overlap. but that label still ends up in a place it probably should not be in.

To reproduce, have a second device with firefox (e.g. a mobile phone) and allow sync to share open tabs. If you then enter text in the megabar that matches a tab open on the second device, you should get that label.

Thanks in advance, and let me know if you need any further information!

[Aris-t2]

Test this: CSS.zip

[Fuchs]

Test this: CSS.zip

Thanks for the quick reply, this halfway resolves it, so it's definitely changing stuff at the right place.
However, the entry from the other device now ends up as single line until you hover / select it by keyboard, which is a bit bad UX wise as it makes elements jump around / the list change its height.

It's a good workaround, if you can somehow manage to place that text in the second line or, if that doesn't work, enforce the same height for all items even if they are only a single line, that would be perfect.

Edit: it seem that the change in height comes from the URL showing once you hover it. So if there is a CSS way to enforce the same height for each element even if there is only a single line (thus keeping the space for where the URL would be with an empty placeholder) that would definitely fix it.

[Aris-t2]

There is more that can be done, but Mozilla should really stop adding visually different types of suggestions to that popup ;-)
CSS.zip
(I hope this one takes care of all currently available.)

[Fuchs]

Thanks already, I shall try today after work, long day though, sorry for the delay.

[Fuchs]

That works, and it even places the URL very nicely, I love it. Thank you very much ♥