From 75d038df8f384526c6a25f3b89f5f91b12a0495e Mon Sep 17 00:00:00 2001
From: Alessandra Davila
Date: Mon, 19 Sep 2022 12:40:20 -0400
Subject: [PATCH] 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>
---
.../TypesetStyle/typeset-style.scss | 28 +++++++------------
1 file changed, 10 insertions(+), 18 deletions(-)
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%;
}
}