Spacing adjustments

[brianfleming]

Description

Some layout changes to make more room for UI elements. There has been some feedback after the last tabs changes, this further refines layout to make things more consistent:

• adjust min widths for media items to increase the chance tabs will not wrap
• use the youtube logic to set the min and max width of the large media card item so it matches their list view
• more predictable media page responsive layout change by specifically change the flex direction at the breakpoint

Unrelated:

• noticed a weird wording in a toast message, so changed it.

Type of change

• Performance improvement and/or refactoring (non-breaking change that keeps existing functionality)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Security mitigation or enhancement
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Automated test (add or update automated tests)

How has this been tested?

visited all major page layouts in app to verify consistent margin/padding

Things to pay attention to during code review

• test out different screen sizes on media page to make sure it all makes sense
• all of the major containers in the app have gone from 32px side margin/padding to 16px which is more consistent for other UI elements

Checklist

• I have performed a self-review of my own code
• I've made sure my branch is runnable and given good testing steps in the PR description
• I considered secure coding practices when writing this code. Any security concerns are noted above.
• I have commented my code in hard-to-understand areas, if any
• I have made needed changes to the README
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• If I implemented any new components, they are self-contained, their propTypes are declared and they use React Hooks and, if data-fetching is required, they use Relay Modern with fragment containers
• If my components involve user interaction - specifically button, text fields, or other inputs - I have added a BEM-like class name to the element that is interacted with
• To the best of my knowledge, any new styles are applied according to the design system
• If I added a new external dependency, I included a rationale for doing so and an estimate of the change in bundle size (e.g., checked in https://bundlephobia.com/)
• If I touched a file that included an eslint-disable-file header, I updated the code such that the disabler can be removed

[brianfleming]

removed atypical use of 18 vs 16px

[brianfleming]

cc @caiosba this was the PR i mentioned during our 1:1

[caiosba]

Thanks, @brianfleming - @sarahkeh , can you please take the first review and ask for @amoedoamorim to do a second review if needed? We want to get these fixes in at the same time as the other fixes I'm going to deploy for the data dashboard.

[sarahkeh]

lgtm