Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add min-width to childeren of horizontal stack #1761

Merged
merged 1 commit into from
Oct 13, 2018
Merged

add min-width to childeren of horizontal stack #1761

merged 1 commit into from
Oct 13, 2018

Conversation

bramkragten
Copy link
Member

@bramkragten bramkragten commented Oct 12, 2018

To prevent layout screwup by a card that doesn't plays nice and forces the entire flex parent element too wide.
See: https://drafts.csswg.org/css-flexbox/#min-size-auto
and https://css-tricks.com/flexbox-truncated-text/

Verified

This commit was signed with the committer’s verified signature.
pradyunsg Pradyun Gedam
@balloob
Copy link
Member

balloob commented Oct 13, 2018

Can you add screenshots of before and after?

@bramkragten
Copy link
Member Author

bramkragten commented Oct 13, 2018

I won't change anything in most cases, but it prevents a card in a horizontal stack to become larger (because it's children define the min-width) and the rest of the horizontal stack elements to be pushed out of the column.

With some custom cards, swiper and button:
Before:
image
After:
image

And with standard cards, it can also happen:
Before:
image
After:
image

@balloob balloob merged commit 2f6595b into home-assistant:master Oct 13, 2018
@ghost ghost removed the in progress label Oct 13, 2018
@bramkragten bramkragten deleted the patch-4 branch October 14, 2018 15:55
@github-actions github-actions bot locked and limited conversation to collaborators Jul 7, 2022
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.

None yet

4 participants