Skip to content

Commit

Permalink
Fix long choice hint text wrapping the whole label in Safari
Browse files Browse the repository at this point in the history
This could be reproduced by setting a really long hint text to a choice that would wrap it. The `flex-basis: min-content` declaration is not supported by Safari yet, so we can't rely on it to build our layout
  • Loading branch information
pwolfert authored and forrestbaer committed Jun 27, 2022
1 parent 0a59ed9 commit 037f6fc
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions packages/design-system/src/styles/components/_Choice.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ $ds-c-inset-border-width: $spacer-half;
// Layout styles for wrapping choice container
.ds-c-choice-wrapper {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
// max-width: $input-max-width;
Expand All @@ -22,7 +21,8 @@ $ds-c-inset-border-width: $spacer-half;
.ds-c-choice + label,
.ds-c-choice + .ds-c-label {
cursor: pointer;
flex: 1 1 min-content;
flex-grow: 1;
flex-basis: min-content;
font-weight: $font-normal;
margin-top: 0;
max-width: max-content;
Expand Down Expand Up @@ -65,6 +65,7 @@ label,
cursor: pointer;
display: grid;
height: $choice-size;
flex-shrink: 0;
justify-items: center;
margin: 0;
place-content: center;
Expand Down

0 comments on commit 037f6fc

Please sign in to comment.