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

Fix broken button dimensions in IE11 #10054

Merged
merged 1 commit into from Sep 20, 2018

Conversation

Projects
None yet
2 participants
@brandonpayton
Member

brandonpayton commented Sep 20, 2018

Description

This is a PR to fix shrunken buttons seen when editing permalinks and reusable blocks.

image

In both cases, IE11 appears to be shrinking the buttons based on a sibling flex item with width or flex-basis of 100%. I played with changing the basis of those items to auto but later realized we actually want to use 100%, at least in the reusable blocks case, because it nicely wraps to new flex lines on mobile.

This fix simply sets flex-shrink: 0 on those buttons and does so for all browsers because I'm not aware of cases where we'd want the buttons to shrink. Please correct me if I'm wrong. : )

Fixes #7481.

How has this been tested?

I loaded Gutenberg in the following browsers and observed expected rendering of the permalink and reusable block buttons and surrounding UI:

  • IE11
  • Edge
  • Firefox 63
  • Chrome 69
  • Safari 11.1
  • iOS Safari latest
  • Android WebView latest

@brandonpayton brandonpayton requested a review from jasmussen Sep 20, 2018

@@ -76,7 +83,6 @@
// Higher specificity required to override core margin styles.
.editor-post-permalink-editor__save {
margin-left: auto;
flex: 0 1 auto;

This comment has been minimized.

@brandonpayton

brandonpayton Sep 20, 2018

Member

This is removed because it is the default and interferes with setting flex-shrink for all permalink buttons above.

@brandonpayton

brandonpayton Sep 20, 2018

Member

This is removed because it is the default and interferes with setting flex-shrink for all permalink buttons above.

@jasmussen

Confirmed, this fixes it and there doesn't seem to be regressions. Nice work!

Before:

screen shot 2018-09-20 at 09 29 04

After:

screen shot 2018-09-20 at 09 28 01

@brandonpayton

This comment has been minimized.

Show comment
Hide comment
@brandonpayton

brandonpayton Sep 20, 2018

Member

Thanks for the review, @jasmussen, and for the good example on posting the before/after.

Member

brandonpayton commented Sep 20, 2018

Thanks for the review, @jasmussen, and for the good example on posting the before/after.

@brandonpayton brandonpayton merged commit 9338a1d into master Sep 20, 2018

2 checks passed

codecov/project 48.68% remains the same compared to d5bbd81
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment