Further network layout improvements.

public/css/style.css

@@ -520,21 +520,18 @@
 
 /* $primary: #ff886c; */
 .header[data-v-194630f6] {
+  background: #222;
   display: -webkit-box;
   display: flex;
+  -webkit-box-align: center;
+          align-items: center;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
           justify-content: space-between;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
 }
 .title[data-v-194630f6] {
-  display: -webkit-inline-box;
-  display: inline-flex;
-  -webkit-box-align: top;
-          align-items: top;
-  margin: 0 1rem 0 0;
-}
-.title:hover .icon[data-v-194630f6] {
-    fill: #ff6c88;
+  padding: 1rem;
 }
 .heading[data-v-194630f6] {
   padding: 0;
@@ -552,7 +549,7 @@
 }
 .logo[data-v-194630f6] {
   width: 20rem;
-  max-height: 8rem;
+  max-height: 6rem;
   -o-object-fit: contain;
      object-fit: contain;
   margin: 0 .5rem 1rem 0;
@@ -563,17 +560,6 @@
   -webkit-box-align: center;
           align-items: center;
 }
-.networklogo[data-v-194630f6] {
-  color: #222;
-  width: 15rem;
-  max-height: 6rem;
-  font-weight: bold;
-  -o-object-fit: contain;
-     object-fit: contain;
-  -o-object-position: 100% 0;
-     object-position: 100% 0;
-  margin: 0 0 0 .5rem;
-}
 .sites[data-v-194630f6],
 .scenes[data-v-194630f6] {
   display: grid;
@@ -640,15 +626,16 @@
   grid-template-columns: 1fr;
   overflow-y: auto;
 }
-.sites.compact[data-v-7bebaa3e] {
-    display: -webkit-box;
-    display: flex;
+.sites.compact[data-v-7bebaa3e]:not(.expanded) {
     overflow-x: auto;
 }
-.sites.compact .tile[data-v-7bebaa3e] {
+.sites.compact:not(.expanded) .tile[data-v-7bebaa3e] {
       width: 15rem;
       margin: 0 1rem 0 0;
 }
+.sites.expanded[data-v-7bebaa3e] {
+    grid-template-columns: repeat(2, 0.5fr);
+}
 
 /* $primary: #ff886c; */
 @media (max-width: 1200px) {
@@ -670,6 +657,12 @@
           justify-content: stretch;
   overflow-y: auto;
 }
+.content-inner[data-v-e2e12602] {
+  padding: 0;
+}
+.releases[data-v-e2e12602] {
+  padding: 1rem;
+}
 .sidebar[data-v-e2e12602] {
   height: 100%;
   width: 18rem;
@@ -679,8 +672,8 @@
   -webkit-box-direction: normal;
           flex-direction: column;
   flex-shrink: 0;
-  color: #fff;
   border-right: solid 1px rgba(0, 0, 0, 0.1);
+  color: #fff;
   overflow: hidden;
 }
 .sidebar .title[data-v-e2e12602] {
@@ -701,10 +694,8 @@
   -webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
           filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
 }
-.sites.compact[data-v-e2e12602] {
-  display: none;
-}
 .header[data-v-e2e12602] {
+  background: #222;
   width: 100%;
   height: 4rem;
   display: none;
@@ -712,6 +703,17 @@
           justify-content: center;
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
 }
+.sites.compact[data-v-e2e12602] {
+  display: none;
+}
+.expand[data-v-e2e12602] {
+  display: none;
+  padding: .5rem;
+  text-align: center;
+  cursor: pointer;
+  font-size: .9rem;
+  font-weight: bold;
+}
 @media (max-width: 720px) {
 .header[data-v-e2e12602] {
     display: -webkit-box;
@@ -720,7 +722,12 @@
 .sites.compact[data-v-e2e12602] {
     display: -webkit-box;
     display: flex;
-    padding: 0 1rem 1rem 1rem;
+}
+.sites.compact.expanded[data-v-e2e12602] {
+      display: grid;
+}
+.expand[data-v-e2e12602] {
+    display: block;
 }
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;