fix: APPS_3447 override image style media gallery

[farosFreed]

Connected to APPS-3447

Component Edited: FTVA MediaGallery.vue styles

Notes:

• Added a css override for the cover / contain behavior in ftva
• Added a long, tall image to test data

Checklist:

• I checked that it is working locally in the dev server
• I checked that it is working locally in the storybook
• I checked that it is working locally in the
  library-website-nuxt dev server
• I added a screenshot of it working
• UX has reviewed and approved this
• I assigned this PR to someone on the dev team to review
• I used a conventional commit message
• I assigned myself to this PR

[github-actions]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions]

🚀 Deployed on https://deploy-preview-829--ucla-library-storybook.netlify.app

[pghorpade]

@farosFreed Can we do this change on the template instead of in the component library, or we can create a prop instead of using !important in the component css

[farosFreed]

@pghorpade Yeah - If we do a prop then I will need to make changes to flexible page blocks to pass the correct prop to the carousels based on the theme and we will likely need to make some page level ftva changes to implement the prop - it will not be a small localized change. But maybe it's better to make it a prop now rather than later when there are even more rules.

It would be quickest and easiest to just move the code (including the !important) to the ftva site rules as a global rule for carousels inside flexible page-blocks, but any pure css solution must include the !important tag because we are overwriting inline component styles.

I'm still waiting for UX approval on this but let me know which approach you're leaning toward.

[pghorpade]

Another option to prop is to inject/provide in Vue, so we don't have to do prop drilling if the child component where the prop is used is further down the hierarchy.

[pghorpade]

👍

[pghorpade]

🎉 This PR is included in version @ucla-library-monorepo/ucla-library-website-components-v1.34.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀