search

boltdesignsystem / bolt

The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
https://boltdesignsystem.com
MIT License
292 stars 45 forks source link

DS-699 Safari Image Position Bug #2422

Closed MarcinMr closed 2 years ago

MarcinMr commented 2 years ago

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 commented 2 years ago

@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:

https://user-images.githubusercontent.com/85670248/150520655-7c28235a-83be-4e2f-ba7e-311d2b736ec7.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.