Header mobile fixes

src/components/Feed/Group.scss

@@ -33,3 +33,13 @@
     transition: filter 0.2s;
   }
 }
+
+.floor--group {
+  @include media-breakpoint-down(sm) {
+    .col-lg-6 {
+      .row {
+        margin: 0 0 0 divide(-$container-padding-x, 2);
+      }
+    }
+  }
+}

src/components/Feed/Group.tsx

@@ -11,7 +11,7 @@ interface GroupProps {
 export default (props: GroupProps) => {
   if (!props.articles) props.articles = []
   return (
-    <div class="floor floor--important">
+    <div class="floor floor--important floor--group">
       <Show when={props.articles.length > 4}>
         <div class="wide-container row">
           <div class="group__header col-12">{props.header}</div>

src/components/Nav/Header.module.scss

@@ -50,6 +50,11 @@
 .headerFixed {
   position: fixed;
   top: 0;
+
+  .fixed & {
+    bottom: 0;
+    margin-bottom: 0;
+  }
 }
 
 .headerInner {
@@ -60,8 +65,7 @@
   justify-content: space-between;
   margin: 0;
 
-  &.fixed {
-    border-bottom: 4px solid #000;
+  .fixed & {
     left: 0;
     position: fixed;
     right: 0;
@@ -78,25 +82,33 @@
 .mainLogo {
   align-items: center;
   display: inline-flex;
-  height: 70px;
+  height: 56px;
   padding: 0 $container-padding-x 0 0;
   position: relative;
   transition: height 0.2s;
   text-align: center;
   z-index: 9;
 
+  @include media-breakpoint-up(md) {
+    height: 70px;
+  }
+
   @include media-breakpoint-up(lg) {
     height: 80px;
   }
 
   img {
-    height: 32px;
+    height: 20px;
     object-fit: contain;
     object-position: left;
     transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
 
+    @include media-breakpoint-up(md) {
+      height: 32px;
+    }
+
     @include media-breakpoint-up(lg) {
       width: 175px;
     }
@@ -129,6 +141,14 @@
   padding-left: 0;
   position: relative;
   @include font-size(1.7rem);
+
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+
+  .fixed & {
+    display: block;
+  }
 }
 
 .mainNavigation {
@@ -161,7 +181,7 @@
     padding: divide($container-padding-x, 2);
   }
 
-  &.fixed {
+  .fixed & {
     display: inline-flex;
 
     @include media-breakpoint-down(lg) {
@@ -197,12 +217,8 @@
   display: inline-flex;
   float: right;
   padding-right: 0;
-  padding-left: 0;
-  width: 2.2rem;
-
-  @include media-breakpoint-up(sm) {
   padding-left: divide($container-padding-x, 2);
-  }
+  width: 2.2rem;
 
   @include media-breakpoint-up(md) {
     display: none;
@@ -251,7 +267,7 @@
     top: 0;
   }
 
-  &.fixed {
+  .fixed & {
     > div {
       opacity: 0;
       transition: opacity 0s;
@@ -292,6 +308,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
+
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
 }
 
 .headerSearch {
@@ -321,6 +341,7 @@
 
 .articleControls {
   display: flex;
+  justify-content: flex-end;
   left: 0;
   position: absolute;
   top: 50%;

src/components/Nav/Header.tsx

@@ -51,7 +51,10 @@ export const Header = (props: Props) => {
   const toggleFixed = () => setFixed(!fixed())
   // effects
   createEffect(() => {
-    document.body.classList.toggle('fixed', fixed() || (getModal() && getModal() !== 'share'));
+    const isFixed = fixed() || (getModal() && getModal() !== 'share');
+
+    document.body.classList.toggle('fixed', isFixed);
+    document.body.classList.toggle(styles.fixed, isFixed);
   }, [fixed(), getModal()])
 
   // derived