Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-arrange] Revert change for small viewport flex css properties #4091

Merged
merged 3 commits into from
Apr 24, 2024

Conversation

artpark
Copy link
Contributor

@artpark artpark commented Apr 22, 2024

Summary

What was changed:
Removed the flex property that was only available during a viewport smaller than 320px x 256px. After testing more thoroughly, I found that these did not have the intended behavior and was causing issues in IE.

Why it was changed:
To fix the IE overlapping elements bug.

Testing

This change was tested using:

  • WDIO
  • Jest
  • Visual testing (please attach a screenshot or recording)
  • Other (please describe below)
  • No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • UX review
  • Accessibility review
  • Functional review

Additional Details

This PR resolves:

UXPLATFORM-10305


Thank you for contributing to Terra.
@cerner/terra

@artpark artpark self-assigned this Apr 22, 2024
@artpark artpark requested a review from a team as a code owner April 22, 2024 22:32
@github-actions github-actions bot temporarily deployed to preview-pr-4091 April 22, 2024 22:32 Destroyed
@@ -42,12 +38,4 @@
.default {
align-self: flex-start;
}

@media (max-width: 320px), (max-height: 256px) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is Mpage Fusion components that consumes terra-arrange are tested with these changes ? Can add the screenshots on Jira as well before merging this pr

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@supreethmr Yup, the MPages Fusion component, ContentDecorator, has been tested with these changes. Here is the before and after when the window is resized to 320 x 256px.

Before:
Screenshot 2024-04-23 at 4 49 49 PM

After:
Screenshot 2024-04-23 at 4 51 51 PM

Interestingly, the flex property doesn't do anything in the example. The parent div has a style of display: block. So flex has no effect on it.

If the before change's styling of flex: 0 0 were actually to be applied, it would look like this:
Screenshot 2024-04-23 at 4 48 15 PM

@artpark artpark merged commit b09f41c into main Apr 24, 2024
22 checks passed
@artpark artpark deleted the terra_arrange_ie_fix branch April 24, 2024 14:00
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants