fix(frontend): changed plex, request, and cog buttons to align proper…

[OwsleyJr]

…ly on smaller mobile UIs

Description

Play on plex/watch trailer, request, and settings cog buttons would break on a smaller mobile device such as an iPhone X. Also aligns media status with the poster.

Screenshot (if UI related)

Before:

After:

Todos

• Sucessfully builds yarn build
• Translation Keys yarn i18n:extract
• Database migration created (if required)

[TheCatLady]

What is the reasoning behind the changes in 59611a2? There are other elements that would also need to be updated as a result of those new changes.

[sct]

What is the reasoning behind the changes in 59611a2? There are other elements that would also need to be updated as a result of those new changes.

I asked him to change it to this because I didn't like the buttons going to the edge of the screen. They should respect the same margins the rest of the site has. What other components would need to change?

[TheCatLady]

What is the reasoning behind the changes in 59611a2? There are other elements that would also need to be updated as a result of those new changes.

I asked him to change it to this because I didn't like the buttons going to the edge of the screen. They should respect the same margins the rest of the site has. What other components would need to change?

Ah I see. We also need to apply the same margins from the "Play on Plex" button to the div surrounding the request button and the cog button, right? Otherwise we'll run into the same issue depending if the elements fit on one line or not?

[OwsleyJr]

What is the reasoning behind the changes in 59611a2? There are other elements that would also need to be updated as a result of those new changes.

I asked him to change it to this because I didn't like the buttons going to the edge of the screen. They should respect the same margins the rest of the site has. What other components would need to change?

Ah I see. We also need to apply the same margins from the "Play on Plex" button to the div surrounding the request button and the cog button, right? Otherwise we'll run into the same issue depending if the elements fit on one line or not?

I changed the margin on the div wrapping the three buttons so they will stay the same on one line.

[TheCatLady]

I changed the margin on the div wrapping the three buttons so they will stay the same on one line.

I just pulled your changes to get a better look. I see what you did now. LGTM!

[github-actions]

🎉 This PR is included in version 1.20.0 🎉

The release is available on:

• v1.20.0
• GitHub release

Your semantic-release bot 📦🚀