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
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dcb3029
Initial test with icon
artpark Apr 19, 2024
6989cf8
Revert change for small viewport flex css properties
artpark Apr 22, 2024
b4e5b65
Update CHANGELOG
artpark Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-arrange/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Removed
* Reverted the change for a reflow issue when the viewport is resized to 320x256 px.

## 3.56.1-alpha.0 - (April 10, 2024)

* Changed
Expand Down
16 changes: 2 additions & 14 deletions packages/terra-arrange/src/Arrange.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,14 @@

// Makes sure fill expands to fill the remaining space of its parent container
.fill {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex: 1 1 auto;
min-width: 0;
}

// Styles specific to align items independently of each other
.fit {
align-self: flex-start;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
flex: 0 0 auto;
}

.center {
Expand All @@ -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

.fit {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
}
}
}
Loading