DS-699 Safari Image Position Bug

[MarcinMr]

Jira

https://pegadigitalit.atlassian.net/browse/DS-699

Summary

An image center position on Safari was fixed

Details

When max-width: value; inline style is applied to an <img> and modal width property is set to auto, the image should stay in the center position.

How to test

Pull the branch. Add an inline style to an image for example max-width: 600px and set the modal width to auto, Check if modal width adjusts to the image width and the image stays in the center position.

[MarcinMr]

@mikemai2awesome

Here https://boltdesignsystem.com/pattern-lab/?p=components-modal-trigger-variations is written that:

"Advanced usage: if the Image component has an absolute value (e.g. 640px) defined for max_width, then the modal's width prop can be set to auto. This will allow the image inside the modal to be responsive but does not stretch beyond the specified max_width."

But this didn't work well and the image wasn't responsive below its max-width declaration, like in the video example:

image.modal.unresponsive.mov

I added the width: 100% to the image that exists inside a modal, but wasn't sure if it should be declared in the modal.scss like now or they should add the width property using inline style every time the max-width is set.

Just curious, do we have/use user-agent classes depending on what browser the user has? Wouldn't it be good to fix bugs related to the browser? Because sometimes fixing something on one browser can break things on another.

[mikemai2awesome]

@MarcinMr I reverted some of your CSS, the docs are outdated. All images must have width and height attributes defined, this will ensure they display correctly.

I also fixed some of the docs to be more clear.