Addons-frontend: AMO homepage has layout issues for German on smaller screen sizes

[AlexandraMoga]

STR:

1. Load AMO homepage in responsive design (~720 - 750 width)
2. Change your locale to Deutsch
3. Observe the layout of the Collections shelf (Customize the way Firefox works...)

Expected result:
There are no layout issues

Actual result;
There is little to no spacing between the Collection titles

Notes:

• reproduced on all AMO servers with FF57 Win10 and Android 7.0 (tablet).

[himanish-star]

@AlexandraMoga , I can fix this. May I ?

[muffinresearch]

@himanish-star if you are still interested in looking at this then feel free - please let me know if you have any questions. When you have a PR please file it referencing this issue with "Fixes #ISSUE_NUMBER". Thanks!

[himanish-star]

@muffinresearch, Thanks. I am currently a bit occupied elsewhere :sweat_smile: . So if someone else wants to work on this they can surely move ahead. In the meanwhile if I find some time, I'll surely work on this and file a PR.

[muffinresearch]

@himanish-star no problem - I've updated the labels and this is open for other contributions.

[wagnerand]

@pwalm Could you advise what we'd do best in this case?

[pwalm]

Here's a layout I mocked up for skinnier view ports that should accommodate longer text strings/localization:

[caitmuenster]

If this is your first contribution, please refer to https://wiki.mozilla.org/Add-ons/Contribute/Code on how to get started.

Mentor: @willdurand

[hritvi]

Hey @caitmuenster I would like to work on this issue. So can I be assigned this?

[championshuttler]

Hi @hritvi thanks for your interest. Go for it! If you need any help, please feel free to ask here :smile:

[willdurand]

Hi @hritvi, I just saw your Pull Request for this issue. Thank you!

Yet, I don't think we should modify the CSS breakpoints, because that impacts everything, not just what we're trying to fix. I think we should rather update the CSS for the Card (or the closest component possible).

[hritvi]

Hey @willdurand. Thanks for the quick review.
I agree with you on CSS Breakpoints. Would update my pull request soon.

[hritvi]

Hey @willdurand I have updated the PR. The views now are :
(For media screens between 720px and 760px)

[willdurand]

Awesome, thanks for your contribution @hritvi!

[hritvi]

Thanks @championshuttler @rebmullin and @willdurand for all the help and quick reviews :smile:

[AlexandraMoga]

I think this patch might have broken the Theme categories section from the homepage:

This is for full size screens

Medium size:

[willdurand]

oh noes... it could be this line: https://github.com/mozilla/addons-frontend/pull/5974/files#diff-60639a955bb764f0dc57c23a34ffbd85R135

[hritvi]

oh sorry... I would change it right now...

[willdurand]

I am looking into it now

[willdurand]

oh sorry... I would change it right now...

@hritvi no worries, it is fine and that's why we have QA

[willdurand]

@hritvi I just saw your new patch. Thanks for that! We are going to revert the first patch, and then you will be able to submit your patch again along with the second fix. We'll try to make sure everything works well before merging :)

[willdurand]

@hritvi reverted! Now (and if you like) you can submit a new PR with your previous changes + your fix in #6211. I can help you with that if you need, just let me know!

[willdurand]

We usually don't revert commits but we freeze the code in 30 minutes (meaning the code in master in 30 minutes will go live in two days). That's why we prefer reverting your patch, it gives everyone more time to work on it and test it before everyone can see it.

[willdurand]

awesome, thanks @hritvi!

[AlexandraMoga]

Verified fixed on AMO-dev with FF62, Win10x64 and Android 8.0