diff --git a/src/components/TypesetStyle/typeset-style.scss b/src/components/TypesetStyle/typeset-style.scss index 61285c4f718..25031407e9d 100644 --- a/src/components/TypesetStyle/typeset-style.scss +++ b/src/components/TypesetStyle/typeset-style.scss @@ -83,9 +83,14 @@ .cds--typeset-style-controls-sticky { align-items: center; background-color: $white-0; + box-sizing: content-box; + position: sticky; width: auto; z-index: 2; - box-sizing: content-box; + + @include breakpoint('md') { + flex-wrap: nowrap; + } } .cds--typeset-style-controls-sticky-stuck { @@ -119,22 +124,14 @@ } .cds--typeset-style-breakpoint-controls { - height: 3rem; align-items: center; display: flex; + height: 3rem; overflow-x: auto; - white-space: nowrap; padding-left: $spacing-05; padding-right: 0; + white-space: nowrap; width: 100%; - - @include breakpoint('md') { - width: 62.5%; - } - - @include breakpoint('lg') { - width: 50%; - } } .cds--typeset-style-screen-width-label { @@ -147,21 +144,16 @@ height: 3rem; border-top: 1px solid $gray-20; border-bottom: 1px solid $gray-20; - padding-left: $spacing-05; - padding-right: $spacing-05; display: grid; grid-template-columns: auto 1fr auto; + padding-left: $spacing-05; + padding-right: $spacing-05; width: 100%; @include breakpoint('md') { border-top: none; border-bottom: none; border-left: 1px solid $gray-20; - width: 37.5%; - } - - @include breakpoint('lg') { - width: 50%; } }