updating footer breakpoints sm

Author: partyparrotgreg

apps/insights/src/components/Root/footer.module.scss

@@ -12,16 +12,21 @@
   .topContent {
     display: flex;
     gap: theme.spacing(6);
-
+    
     // SM
     flex-flow: row nowrap;
     align-items: center;
     justify-content: space-between;
 
+    @media screen and (max-width: theme.breakpoint("sm")) {
+      flex-flow: column nowrap;
+      align-items: flex-start;
+    }
+
     @include theme.max-width;
 
     // XL
-    margin-bottom: theme.spacing(12);
+    margin-bottom: theme.spacing(6);
 
     // py-6
 
@@ -91,6 +96,11 @@
     flex-flow: row nowrap;
     justify-content: space-between;
 
+    @media screen and (max-width: theme.breakpoint("sm")) {
+      flex-flow: column nowrap;
+      align-items: flex-start;
+    }
+
     // "flex-col
 
     @include theme.max-width;

apps/insights/src/components/Root/header.module.scss

@@ -63,7 +63,7 @@
       }
     }
 
-    @media screen and (min-width: theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))) {
+    @media screen and (min-width: #{theme.$max-width + (2 * (theme.spacing(9) + theme.spacing(8) + theme.spacing(7)))}) {
       .leftMenu {
         margin-left: -#{theme.spacing(9) + theme.spacing(7)};
 

packages/component-library/src/theme.scss

@@ -80,6 +80,18 @@ $border-radius: (
   @return map-get-strict($border-radius, $radius);
 }
 
+$brakpoints: (
+  "sm": 480px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "2xl": 1536px,
+);
+
+@function breakpoint($breakpoint) {
+  @return map-get-strict($brakpoints, $breakpoint);
+}
+
 $color-pallette: (
   "black": #000,
   "white": #fff,