fix: grid alignment on typography page (#2746)

* fix: grid alignment on typography page * fix: update padding
carbon-design-system · Feb 22, 2022 · c9b26f9 · c9b26f9 · vercel · Feb 22, 2022
1 parent 798882f
commit c9b26f9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 9 deletions.
diff --git a/src/components/TypesetStyle/TypesetExample.js b/src/components/TypesetStyle/TypesetExample.js
@@ -32,9 +32,8 @@ const TypesetExample = (props) => (
         )
       );
 
-      const currentBreakpointPx = values(breakpoints)[
-        indexOfClosestLargerBreakpoint
-      ];
+      const currentBreakpointPx =
+        values(breakpoints)[indexOfClosestLargerBreakpoint];
 
       const currentBreakpointName = findKey(
         breakpoints,
@@ -48,7 +47,9 @@ const TypesetExample = (props) => (
           typeStylesUntilCurrentBreakpoint.push(
             props.typeScale[type.key][item]
           );
-          if (item === breakpointName) {break;}
+          if (item === breakpointName) {
+            break;
+          }
         }
         return Object.assign(
           {},
@@ -129,13 +130,13 @@ const TypesetExample = (props) => (
           className={`${prefix}--typeset-example`}>
           <div className={`${prefix}--typeset-example-row ${prefix}--row`}>
             <div
-              className={`${prefix}--typeset-example-description ${prefix}--col-md-5`}>
+              className={`${prefix}--typeset-example-description ${prefix}--col-md-6`}>
               <p className={versionClassNames} style={specs}>
                 {type.description}
               </p>
             </div>
             <div
-              className={`${prefix}--typeset-example-specs ${prefix}--col-md-3 ${prefix}--padding`}>
+              className={`${prefix}--typeset-example-specs ${prefix}--col-md-2 ${prefix}--padding`}>
               <span className={`${prefix}--type-body-short-01`}>
                 <span className={`${prefix}--type-semibold`}>{type.name} </span>
                 <br />

diff --git a/src/components/TypesetStyle/typeset-example.scss b/src/components/TypesetStyle/typeset-example.scss
@@ -48,7 +48,7 @@
 }
 
 .bx--typeset-example-specs {
-  padding: $spacing-05 $spacing-06;
+  padding: $spacing-05;
 
   @include carbon--breakpoint('md') {
     width: 33.3%;

diff --git a/src/components/TypesetStyle/typeset-style.scss b/src/components/TypesetStyle/typeset-style.scss
@@ -14,8 +14,6 @@ $prefix: 'bx';
 
   @include carbon--breakpoint('lg') {
     margin-top: 0;
-    left: 0.5rem;
-    margin-right: $spacing-03;
   }
 }