web/app/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header class="mainmenu">
     <router-link :to="{ name: 'index' }" class="navbar-brand">{{ flamencoName }}</router-link>
     <nav>
       <ul>
@@ -17,7 +17,11 @@
         </li>
       </ul>
     </nav>
-    <farm-status v-if="socketIOConnected" :status="farmStatus.status()" />
+  </header>
+  <header class="farmstatus">
+    <farm-status :status="farmStatus.status()" />
+  </header>
+  <header class="links">
     <api-spinner />
     <span class="app-version">
       <a :href="backendURL('/flamenco-addon.zip')">add-on</a>
@@ -51,7 +55,6 @@ export default {
     flamencoVersion: DEFAULT_FLAMENCO_VERSION,
     backendURL: backendURL,
     farmStatus: useFarmStatus(),
-    socketIOConnected: false,
   }),
   mounted() {
     window.app = this;
@@ -62,7 +65,6 @@ export default {
     this.$watch(
       () => sockStatus.isConnected,
       (isConnected) => {
-        this.socketIOConnected = isConnected;
         if (!isConnected) return;
         if (!sockStatus.wasEverDisconnected) return;
         this.socketIOReconnect();

web/app/src/assets/base.css

@@ -111,7 +111,7 @@ body {
   display: grid;
   grid-gap: var(--grid-gap);
   grid-template-areas:
-    "header header header"
+    "header-L header-M header-R"
     "col-1 col-2 col-3"
     "footer footer footer";
   grid-template-columns: 1fr 1fr 1fr;
@@ -124,7 +124,7 @@ body {
 
 body.is-two-columns #app {
   grid-template-areas:
-    "header header"
+    "header-L header-R"
     "col-1 col-2"
     "footer footer";
   grid-template-columns: 1fr 1fr;
@@ -134,7 +134,7 @@ body.is-two-columns #app {
 @media (max-width: 1280px) {
   #app {
     grid-template-areas:
-    "header header"
+    "header-L header-R"
     "col-1 col-2"
     "col-3 col-3"
     "footer footer";
@@ -206,10 +206,37 @@ header {
   align-items: center;
   color: var(--color-text-muted);
   display: flex;
-  grid-area: header;
   padding: 0 var(--spacer-sm);
 }
 
+header.mainmenu {
+  grid-area: header-L;
+}
+header.farmstatus {
+  grid-area: header-M;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (max-width: 1280px) {
+  header.farmstatus {
+    grid-area: header-L;
+    margin-right: 0;
+  }
+}
+@media (max-width: 1070px) {
+  header.farmstatus {
+    /* No more space to show it in the header. */
+    display: none;
+  }
+}
+body.is-two-columns header.farmstatus {
+  grid-area: header-L;
+  margin-right: 0;
+}
+header.links {
+  grid-area: header-R;
+}
+
 header nav {
   margin-right: auto;
 }

web/app/src/components/ApiSpinner.vue

@@ -23,7 +23,7 @@ span {
   transition-delay: 250ms;
   transition-duration: 500ms;
   font-weight: bold;
-  margin-right: 2rem;
+  margin-right: auto;
   position: relative;
 }
 

web/app/src/components/FarmStatus.vue

@@ -26,7 +26,6 @@ const explanation = computed(() => {
 
 <style>
 span#farmstatus {
-  margin: 0 auto;
   cursor: default;
 }
 span#farmstatus span {