diff --git a/styles/21-patterns-options-row.css b/styles/21-patterns-options-row.css index 0b8dce1..fd3dc7b 100644 --- a/styles/21-patterns-options-row.css +++ b/styles/21-patterns-options-row.css @@ -18,6 +18,7 @@ --layout-help-panel-width: var(--layout-options-row-help-panel-width); margin-top: var(--layout-options-row-margin-top); display: flex; + min-width: 0; justify-content: space-between; gap: var(--layout-options-row-main-gap); padding: @@ -36,6 +37,7 @@ .sg-options-row__left, .sg-options-row__right { display: flex; + min-width: 0; flex-wrap: wrap; gap: var(--layout-options-row-group-gap); align-items: center; @@ -55,6 +57,11 @@ flex: 0 0 auto; } +.sg-options-row__left > .sg-pulldown-demo { + min-width: 0; + box-sizing: border-box; +} + @media (max-width: 48rem) { .sg-options-row { flex-direction: column; @@ -109,6 +116,21 @@ .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, .sg-options-row__left > .sg-pulldown-demo .sg-pulldown { width: 100%; + min-width: 0; + max-width: 100%; + box-sizing: border-box; + } + + .sg-options-row__left > .sg-pulldown-demo { + width: 100%; + max-width: 100%; + } + + .sg-options-row .sg-pulldown-panel { + width: 100%; + min-width: 0; + max-width: 100%; + box-sizing: border-box; } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {