Affected versions

• 76.0, 77.0a1 (2020-05-03);

Affected platforms

• macOS 10.15.3, Windows 10, Ubuntu 18.04;

Steps to reproduce

1. Launch Firefox, access about:preferences#privacy
2. Click on Custom for the Enhanced Tracking protection type;
3. Grab the browser and resize shrinking the browser width;

Expected result

• elements are properly displayed;

Actual result

• there is no spacing between the Cookies and its options dropdown;
• also, since it's set to clip to right; menu could be adjusted so it changes size based on text available rather than max-size all the time;

Regression range

• will provide one asap;

Additional notes

• attached recording with the issue.

Regression range:

• Last good: 2018-12-05
• First bad: 2018-12-06
• Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0a65dda20ade2c24bf42fb22bfd7169b320b732e&tochange=a52c254930e8fd4372d2a439b8e0e6cc10a351f8

also, since it's set to clip to right; menu could be adjusted so it changes size based on text available rather than max-size all the time;

I don't understand what this means. Can you elaborate?

Sure, but this might be a whole design change overall; upon re-checking the other areas.

Basically, since the initial dropdown button is set to float to right, the dropdown menu could be adjusted so that it doesn't span across the whole available area (to best fit the longest string of text from menu-options) and could adjust based on the selected option making the button shorter if shorter options are selected and expand to full-bigger width if a longer option would be selected. Would probably make the whole section a bit more animated but raise several issues along the way with setting them up for resize scenarios.

For example with selecting from Cookies: selecting the

• [Cross-site and social media trackers ___________ ]
  option, you have the string then a fairly long blank space until the menu-opener caret when instead you could have it set up for
• [Cross-site and social media trackers].

Johann, who did the UX / design work for the ETP prefs and could help make the situation less bad?

Maybe ewright knows the answer to Gijs' question in comment 4?

Unfortunately this menu needs to be max-size all the time due to a very long string inside of it, and being able to get proper ellipsis behaviour when it is not expanded.
Also, if you look throughout the settings, all buttons and menus are right-float and shift towards the left when the page moves. We can consider a whole overarching design change for the settings, but I am not sure we have resources for that at the moment. Michelle Heubusch owns the designs for the settings pages. But it has been a variety of designers involved in creating these pages, epang would be the likely person to talk to re: privacy and security.
This issue seems to be that we just haven't added a strict margin between the menu and the "Cookies" label.
Some buttons seems to have a padding/margin of 10-27px. But this issue is demonstrated in other areas of settings, such as in the "Home" section.