fix: Menu jumps vertically on logout

[tsl143]

Fixes: mozilla/addons#10792

Fixed GIF

[tsl143]

@muffinresearch, yarn nsp-check even fails at master branch. Did we merge something break-ish ?

[tofumatt]

This seems fine, I'm just confirming it doesn't change anything on other screen sizes...

[tofumatt]

This still moves around on mobile:

Could you adjust it so it doesn't jump on smaller displays as well?

[tofumatt]

(that's responsive mode in Firefox at 320 x 480, btw)

[codecov-io]

Codecov Report

Merging #3194 into master will increase coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    mozilla/addons-frontend#3194      +/-   ##
==========================================
+ Coverage   95.23%   95.24%   +0.01%     
==========================================
  Files         158      158              
  Lines        2916     2924       +8     
  Branches      575      577       +2     
==========================================
+ Hits         2777     2785       +8     
  Misses        120      120              
  Partials       19       19

Impacted Files	Coverage Δ
src/core/api/search.js	100% <0%> (ø)	⬆️
src/core/searchUtils.js	100% <0%> (ø)	⬆️
src/core/api/index.js	96.82% <0%> (+0.05%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c4b89e6...80df25d. Read the comment docs.

[tsl143]

@tofumatt , I got confused between screen size variables then I got mobile-first concept :)
That's cool, and I am going to use that in my projects too.

[muffinresearch]

@muffinresearch, yarn nsp-check even fails at master branch. Did we merge something break-ish ?

See mozilla/addons#10799

[willdurand]

I should have left a comment obviously. The padding-bottom was important to avoid the menu to auto-close itself (because of focus lost) when user moves the cursor from username to the menu itself.

[willdurand]

I tested locally and it is all good.

[willdurand]

I still observe a difference between the menu and login button. It seems there is a 0.25px difference... Could you set the height of the DropdownMenu to 27px?

[tsl143]

@willdurand , I was looking at desktop version where height: 27px had no effect :(
Then I saw the mobile version :P , I forgot #mobileFirst
Here you go -
Mobile:

Desktop:

[willdurand]

Yeah, sorry for that. There is actually an issue on desktop now :-(

[willdurand]

Fixing the height on mobile devices make it work like a charm. However, this broke the desktop mode (focus lost when trying to reach the menu from the username):

[willdurand]

@tsl143 sorry, can you try adding height: 30px for desktop? (in @include respond-to(large))

[tsl143]

@willdurand Instead, how about adding height: auto there?

[willdurand]

@willdurand Instead, how about adding height: auto there?

if that works, why not. I tested locally with 30px to be honest, so I now it should be fine. I'll test with auto then :)

[willdurand]

I tested it locally, and it works for me 👍

[kumar303]

@willdurand has confirmed that the issue in #3194 (review) is resolved.

Thanks @tsl143 !