Fixes some alignment and displays issues

Removes extra gap below the marathon header
Sidebar is constrained to not be too long
Fixes linting error

Related to Issue #44

components/marathon/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box">
+  <div class="box marathon-header-container">
     <div class="main-header">
       <h3 class="title is-3">
         {{ marathonName }}
@@ -79,6 +79,10 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
+.marathon-header-container {
+  margin: 0;
+}
+
 .main-header {
   display: grid;
   grid-template-columns: auto min-content;

pages/marathon/_marathon.vue

@@ -41,11 +41,6 @@ export default Vue.extend({
     },
   },
 
-  mounted(): void {
-    // Show the sidebar by default on desktop-class devices
-    this.collapsed = (globalThis.innerWidth ?? 1024) < 1024;
-  },
-
   watch: {
     $route(to, from): void {
       // Detect when the path changes (not anchors in the same page or queries)
@@ -58,6 +53,11 @@ export default Vue.extend({
     },
   },
 
+  mounted(): void {
+    // Show the sidebar by default on desktop-class devices
+    this.collapsed = (globalThis.innerWidth ?? 1024) < 1024;
+  },
+
   methods: {
     ...mapActions({
       getMarathon: 'api/marathon/get',
@@ -84,6 +84,7 @@ export default Vue.extend({
 
 .marathon-sidebar {
   grid-area: sidebar;
+  align-self: start;
   min-width: min(300px, 100%);
 }