chore(styles): enhance mobile responsiveness in support drawer and drawer components, adjust font sizes for better readability

Author: partyparrotgreg

apps/insights/src/components/Root/support-drawer.module.scss

@@ -34,30 +34,33 @@
         grid-template-columns: max-content 1fr max-content;
         grid-template-rows: max-content max-content;
         text-align: left;
-        gap: theme.spacing(2) theme.spacing(4);
-        align-items: center;
+        gap: theme.spacing(1) theme.spacing(4);
+        align-items: start;
         width: 100%;
 
         .icon {
-          font-size: theme.spacing(8);
+          font-size: theme.spacing(6);
           color: theme.color("states", "data", "normal");
           grid-row: span 2 / span 2;
           display: grid;
           place-content: center;
         }
 
         .header {
-          @include theme.text("sm", "medium");
-
+          @include theme.h6;
+          line-height: 1.5;
           color: theme.color("heading");
         }
 
         .description {
-          @include theme.text("xs", "normal");
-
+          @include theme.text("sm", "normal");
+          line-height: 1.5;
           color: theme.color("muted");
           grid-column: 2;
           grid-row: 2;
+          word-wrap: break-word;
+          overflow: hidden;
+          max-width: 100%;
         }
 
         .caret {

packages/component-library/src/Drawer/index.module.scss

@@ -21,6 +21,13 @@
     flex-flow: column nowrap;
     overflow-y: hidden;
     padding-bottom: theme.border-radius("3xl");
+    @include theme.mobile {
+      width: 100%;
+      inset: 0;
+      border-radius: 0;
+      border: none;
+      padding-bottom: 0;
+    }
 
     .heading {
       padding: theme.spacing(4);
@@ -33,6 +40,11 @@
       flex: none;
       border-bottom: 1px solid theme.color("border");
 
+      @include theme.mobile {
+        padding: theme.spacing(3);
+        padding-left: theme.spacing(4);
+      }
+
       .title {
         @include theme.h4;
 
@@ -52,7 +64,11 @@
     .body {
       flex: 1;
       overflow-y: auto;
+      overflow-x: hidden;
       padding: theme.spacing(6);
+      @include theme.mobile {
+        padding: theme.spacing(4);
+      }
     }
 
     &[data-fill] {

packages/component-library/src/theme.scss

@@ -820,6 +820,22 @@ $elevations: (
   letter-spacing: letter-spacing("tight");
   margin: 0;
 }
+@mixin h5 {
+  font-size: font-size("lg");
+  font-style: normal;
+  font-weight: font-weight("medium");
+  line-height: 125%;
+  letter-spacing: letter-spacing("tight");
+  margin: 0;
+}
+@mixin h6 {
+  font-size: font-size("base");
+  font-style: normal;
+  font-weight: font-weight("medium");
+  line-height: 125%;
+  letter-spacing: letter-spacing("tight");
+  margin: 0;
+}
 
 @mixin text($size: "base", $weight: "normal") {
   font-size: font-size($size);