From f05c7567bd7965b0db20cd86a2789e62e87320e2 Mon Sep 17 00:00:00 2001
From: Alessandra Davila <adavila91@gmail.com>
Date: Fri, 2 Sep 2022 10:03:29 -0500
Subject: [PATCH 1/2] fix(typography): fix controls bug

---
 src/components/TypesetStyle/typeset-style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TypesetStyle/typeset-style.scss b/src/components/TypesetStyle/typeset-style.scss
index 61285c4f718..e8754c5e03b 100644
--- a/src/components/TypesetStyle/typeset-style.scss
+++ b/src/components/TypesetStyle/typeset-style.scss
@@ -86,6 +86,7 @@
   width: auto;
   z-index: 2;
   box-sizing: content-box;
+  flex-wrap: nowrap;
 }
 
 .cds--typeset-style-controls-sticky-stuck {

From 64e6f1fc9f4173ed17955640ae1e34651b108f94 Mon Sep 17 00:00:00 2001
From: Alessandra Davila <adavila91@gmail.com>
Date: Fri, 16 Sep 2022 13:32:23 -0500
Subject: [PATCH 2/2] chore(typsets): fix mobile typeset controls bug

---
 .../TypesetStyle/typeset-style.scss           | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/components/TypesetStyle/typeset-style.scss b/src/components/TypesetStyle/typeset-style.scss
index e8754c5e03b..25031407e9d 100644
--- a/src/components/TypesetStyle/typeset-style.scss
+++ b/src/components/TypesetStyle/typeset-style.scss
@@ -83,10 +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;
-  flex-wrap: nowrap;
+
+  @include breakpoint('md') {
+    flex-wrap: nowrap;
+  }
 }
 
 .cds--typeset-style-controls-sticky-stuck {
@@ -120,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 {
@@ -148,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%;
   }
 }