fix(typography): fix controls bug (#3130)

* fix(typography): fix controls bug

* chore(typsets): fix mobile typeset controls bug

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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%;
   }
 }