Further network layout improvements.

assets/components/networks/network.vue

@@ -45,11 +45,34 @@
             </div>
 
             <div class="content-inner">
-                <Sites
+                <div
                     v-if="sites.length"
-                    :sites="sites"
                     class="compact"
-                />
+                >
+                    <span
+                        v-if="expanded"
+                        class="expand"
+                        @click="expanded = false"
+                    >⇱ collapse</span>
+
+                    <Sites
+                        :sites="sites"
+                        class="compact"
+                        :class="{ expanded }"
+                    />
+
+                    <span
+                        v-if="!expanded"
+                        class="expand"
+                        @click="expanded = true"
+                    >expand ⇲</span>
+
+                    <span
+                        v-if="expanded"
+                        class="expand"
+                        @click="expanded = false"
+                    >⇱ collapse</span>
+                </div>
 
                 <Releases :releases="releases" />
             </div>
@@ -89,6 +112,7 @@ export default {
             sites: null,
             releases: [],
             pageTitle: null,
+            expanded: false,
         };
     },
     mounted,
@@ -119,14 +143,22 @@ export default {
     overflow-y: auto;
 }
 
+.content-inner {
+    padding: 0;
+}
+
+.releases {
+    padding: 1rem;
+}
+
 .sidebar {
     height: 100%;
     width: 18rem;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    color: $text-contrast;
     border-right: solid 1px $shadow-hint;
+    color: $text-contrast;
     overflow: hidden;
 }
 
@@ -146,11 +178,8 @@ export default {
     filter: $logo-shadow;
 }
 
-.sites.compact {
-    display: none;
-}
-
 .header {
+    background: $profile;
     width: 100%;
     height: 4rem;
     display: none;
@@ -158,6 +187,19 @@ export default {
     border-bottom: solid 1px $shadow-hint;
 }
 
+.sites.compact {
+    display: none;
+}
+
+.expand {
+    display: none;
+    padding: .5rem;
+    text-align: center;
+    cursor: pointer;
+    font-size: .9rem;
+    font-weight: bold;
+}
+
 @media(max-width: $breakpoint) {
     .header {
         display: flex;
@@ -165,7 +207,14 @@ export default {
 
     .sites.compact {
         display: flex;
-        padding: 0 1rem 1rem 1rem;
+
+        &.expanded {
+            display: grid;
+        }
+    }
+
+    .expand {
+        display: block;
     }
 
     .network {