fix: issue with motd spacer not being the right width in mobile and desktop

Author: Anthony Kinsey

src/App.vue

@@ -102,7 +102,7 @@ main {
   .main { grid-area: main; }
 
   @include break-mobile-sm {
-    padding: 2rem 1rem 0;
+    padding: .5rem 1rem 0;
 
     #public-content,
     .posts #public-content {

src/components/layout/Header.vue

@@ -247,7 +247,9 @@
       <register-modal :show="showRegister" @close="showRegister = false" />
     </div>
   </header>
-  <div v-if="motdData && motdData.motd_html.length && !hideAnnnouncement" id="motd-spacer"></div>
+  <div v-if="motdData && motdData.motd_html.length && !hideAnnnouncement" id="motd-spacer-wrap">
+      <div id="motd-spacer" v-html="motdData?.motd_html"></div>
+  </div>
 </template>
 
 <script>
@@ -1033,5 +1035,30 @@ header {
   }
 }
 
-#motd-spacer { height: 1rem; @include break-mobile-sm { height: 2rem; } }
+#motd-spacer-wrap {
+  @include clearfix();
+  @include pad(0 $base-grid-padding);
+  margin-bottom: $breadcrumbs-bottom-margin;
+  max-height: 3.2rem;
+  overflow-y: auto;
+  width: 100%;
+  position: relative;
+  margin-top: -1rem;
+  opacity: 0;
+
+  @include break-mobile-sm {
+    font-size: $font-size-sm;
+    line-height: 1.2;
+    max-height: 3.7rem;
+    padding: 0 1rem;
+    margin-top: 0;
+  }
+
+  #motd-spacer {
+    @include base-layout-width;
+    clear: both;
+    padding: 0.5rem 0;
+    color: #666;
+  }
+}
 </style>