WIP Sync

frontend/vue-app/src/layout/ParentLayout.vue

@@ -45,7 +45,7 @@ onMounted(async () => {
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div class="back-btn-container edge-btn-container">
+      <div class="end-button-container">
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
       <nav v-if="!hideViewSelector" class="view-selector">
@@ -153,7 +153,8 @@ onMounted(async () => {
           </svg>
         </button>
       </nav>
-      <div class="login-btn-container edge-btn-container">
+      <div v-else class="spacer"></div>
+      <div class="end-button-container">
         <LoginButton />
       </div>
     </header>
@@ -186,7 +187,7 @@ onMounted(async () => {
   box-sizing: border-box;
 }
 
-.edge-btn-container {
+.end-button-container {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -227,6 +228,13 @@ onMounted(async () => {
     color 0.18s;
 }
 
+.spacer {
+  flex: 1 1 auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
 @media (max-width: 480px) {
   .back-btn {
     font-size: 0.7rem;