Allow height and width configuration in image panels

[gordlin]

Related Item(s)

#392

Changes

• [FEATURE] Add height and width fields to images in the image editor, to allow for user modification
• Add warning about maximum allowed widths

Notes

• New fields:

• Images try to keep their original aspect ratio, so you may not get the exact height and width you input.

Testing

Steps:

1. Go to any product (e.g. 00000000-0000-0000-0000-000000000000)
2. Go to any image panel. If necessary, add an image.
3. See the new height and width fields.
   • Blank fields will make the image take up the max width according to screen size (2/3 of screen on desktop, 100% on mobile).
   • Entering a value larger than the max width will have no effect.
   • Valid values will correctly resize the image in the preview.
   • Try entering various values to test.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/image-size

[RyanCoulsonCA]

Works well functionally, but I think we should look in to a different way of displaying the maximum width warning as it can get a bit messy when there's more than one image:

Maybe a small information icon that displays the message when clicked like the map config editor?

Reviewed 2 of 2 files at r1, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[gordlin]

Donethanks!

Reviewable status: 0 of 2 files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)

[RyanCoulsonCA]

Reviewed 2 of 2 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[IshavSohal]

Looks great, just make sure to rebase with main

Reviewed 2 of 2 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[gordlin]

Donethanks!

Reviewable status: 1 of 2 files reviewed, all discussions resolved (waiting on @IshavSohal and @RyanCoulsonCA)

[szczz]

Reviewed 1 of 2 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)