Privacybadger: "Pin to Overflow Menu" / "Move to Menu" breaks popup layout in Firefox

[stephenyeargin]

Steps to Reproduce

1. Install Privacy Badger on a machine running macOS and Firefox 50+
2. Right click on the Privacy Badger icon in the toolbar and select "Move to Menu"
3. Open the menu and click the Privacy Badger icon
4. Observe a broken layout for the controls

Expected Behavior

• Layout should adjust to fill given space that is roughly 40 pixels narrower than what is allocated

Screenshots

[cooperq]

I think that @groovecoder was maybe trying to fix this issue. Luke, did you come up with anything?

[groovecoder]

I thought I had fixed this with https://github.com/EFForg/privacybadger/pull/1061 for https://github.com/EFForg/privacybadger/issues/1048. Did that get reverted?

[cooperq]

@groovecoder I just looked it up and it should have been in the last release @stephenyeargin what version of privacy badger do you have?

[stephenyeargin]

@cooperq 2016.12.15.1, installed via the site on January 4.

[cooperq]

Yep that's the latest version. @groovecoder I guess we should check on your fix, hopefully it didn't get reverted somehow.

[groovecoder]

Hmm ... looks like my fix was specific to the #instruction element. I'll send another PR that makes it work for the whole body element.

[cooperq]

This is still an issue. The previous fix was reverted as it broke other things.

[berkes]

Title mentions [Firefox 50 for Mac].
Problem occurs on Firefox 54.0 on Ubuntu Linux too.

[lemnis]

I was testing something within FF 57 and remembered this issue.

From Firefox 57 onward, the layout is changed. The popup would now look like:

I did earlier some messy tests to fix the width issues with display: grid, because this issue also messes up the extension within android. The code can be found at: https://github.com/lemnis/privacybadger/tree/fix-popup-layout

The current result of my code:

[imwithsam]

This is _still_ an issue as of version 2018.7.18.1 running Firefox 61.0.1 (64-bit) on Windows 10.

[larabr]

Hey, I'd like to start contributing here, shall I look into this? or is there a more urgent "good-first-issue"?

[bcyphers]

@generalbrus Thanks! I think this is a good issue, unless @ghostwords has plans to work on it already.

[ghostwords]

This is a great issue to help us with.

I hope we can discover a few clever CSS tweaks (as opposed to making large structural changes) to get the popup usable in the overflow menu.