VOTE-959 VOTE-960 video and document style refinements

[rayestrada]

Jira ticket

https://cm-jira.usa.gov/browse/VOTE-959
https://cm-jira.usa.gov/browse/VOTE-960

Description

Update styling of document and video rendered display

Deployment and testing

Post-deploy

1. cd into the theme and run npm run build
2. run lando retune

QA/Test

1. Add a new field to NVRF Page for media reference that include documents, images and video and set it to unlimited values.
2. Create a new test NVRF page and add a document, an image and a remote video and save
3. View the page and confirm:

• the image and remote video fills the container and scales with browser width
• the document link displays with the name of the file, the file size and a file icon

Checklist for the Developer

• A link to the JIRA ticket has been included above.
• No merge conflicts exist with the target branch.
• Automated tests have passed on this PR.
• A reviewer has been designated.
• Deployment and testing steps have been documented above, if applicable.

Checklist for the Peer Reviewers

• The file changes are relevant to the task objective.
• Code is readable and includes appropriate commenting.
• Code standards and best practices are followed.
• QA/Test steps were successfully completed, if applicable.
• Applicable logs are free of errors.

[clmedders]

LGTM

I tested by adding remote video. image and a pdf doc... all uploaded and looked good from at style view.

Just want to note/ask do we need to have the pdf open in a new tab or will that be taken care of with something else?

other than that this looks good

[rayestrada]

Responding to your question: I think we can approach this question when a document field is in use.