Improve mobile styles for the subscription dialog

[jongomez]

Description:

Improve mobile styles for the subscription dialog. Previsouly, for mobile phones in landscape mode, the modal was cut off with no scroll bar:

Screencast.from.26-10-2023.19.11.40.webm

Now, a scroll bar is shown and the content is no longer cut off:

Screencast.from.26-10-2023.19.10.40.webm

Related Issue(s):

(none)

Changes Included:

• Bugfix (a change that fixes an issue)
• New feature (a change that adds new functionality)
• Refactoring (a change that improves code quality and/or architecture)
• Other (explain below)

Implementation Details:

Used the following:

• height: 100%; without this, there is no overflow - if this is not present, the height will be exactly the same as the viewport - meaning scroll bars won't show, and content will be cut off
• overflow: auto; to enable a scrollbar
• justify-content: safe center; in small screens, the safe keyword will not center the content, but display it as flex-start (meaning there's no cutting off / data loss)

Testing:

We can try to emulate landscape on the browser, and checking out the newsletter subscription dialog

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lpe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 26, 2023 6:39pm