fixed more layout

web/vue-app/src/components/LoginButton.vue

@@ -154,6 +154,5 @@ onUnmounted(() => {
 }
 
 .login-button-root {
-  height: 100%;
 }
 </style>

web/vue-app/src/layout/ChildLayout.vue

@@ -1,3 +1,20 @@
+<template>
+  <div class="layout-root">
+    <header class="topbar">
+      <div class="back-btn-container">
+        <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
+      </div>
+      <div class="spacer"></div>
+      <div class="login-btn">
+        <LoginButton />
+      </div>
+    </header>
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { computed } from 'vue'
@@ -17,23 +34,6 @@ const handleBack = () => {
 const showBack = computed(() => route.path !== '/child')
 </script>
 
-<template>
-  <div class="layout-root">
-    <header class="topbar">
-      <div style="height: 100%; display: flex; align-items: center">
-        <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
-      </div>
-      <div></div>
-      <div class="login-btn">
-        <LoginButton />
-      </div>
-    </header>
-    <main class="main-content">
-      <router-view />
-    </main>
-  </div>
-</template>
-
 <style scoped>
 .layout-root {
   width: 100%;
@@ -41,71 +41,31 @@ const showBack = computed(() => route.path !== '/child')
   height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: 0; /* Remove bottom padding */
+  padding: 0;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-/* top bar holds title and logout button */
 .topbar {
-  display: grid;
+  display: flex;
-  grid-template-columns: 76px 1fr 76px;
+  align-items: stretch;
-  align-items: center;
   padding: 5px 5px;
-}
+  height: 48px;
-
-.title {
-  font-size: 1.5rem;
-  color: white;
-  margin: 0;
-}
-
-/* View Selector styles */
-.view-selector {
-  justify-self: center;
-}
-
-.view-selector button {
-  background: #fff;
-  color: #667eea;
-  border: none;
-  border-radius: 8px 8px 0 0;
-  padding: 0.6rem 1.2rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background 0.18s,
-    color 0.18s;
-  font-size: 1rem;
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
-}
-
-.view-selector button.active {
-  background: #7257b3;
-  color: #fff;
-}
-
-.view-selector button.active svg {
-  stroke: #fff;
-}
-
-.view-selector button:hover:not(.active) {
-  background: #e6eaff;
-}
-
-/* main content remains centered */
-.main-content {
-  flex: 1 1 auto;
   width: 100%;
-  justify-content: center;
-  align-items: flex-start;
   box-sizing: border-box;
-  min-height: 0;
-  height: 0; /* Ensures children can use 100% height */
-  overflow: hidden; /* Prevents parent from scrolling */
-  overflow-y: visible;
 }
 
-/* back button specific styles */
+.topbar > .back-btn-container,
+.topbar > .spacer,
+.topbar > .login-btn {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
 .back-btn {
   background: white;
   border: 0;
@@ -114,22 +74,23 @@ const showBack = computed(() => route.path !== '/child')
   cursor: pointer;
   color: #667eea;
   font-weight: 600;
-  align-self: end;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
 }
 
 .login-btn {
-  align-self: end;
+  align-self: start;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 @media (max-width: 480px) {
   .back-btn {
     padding: 0.45rem 0.75rem;
     font-size: 0.6rem;
-    height: 100%;
-  }
-  .login-btn {
-    height: 100%;
   }
 }
 </style>
@@ -144,6 +105,8 @@ const showBack = computed(() => route.path !== '/child')
   color: #667eea;
   font-weight: 600;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 @media (max-width: 480px) {
   .login-btn button {

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

@@ -28,7 +28,7 @@ const showBack = computed(
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div style="height: 100%; display: flex; align-items: center">
+      <div style="height: 100%; display: flex; align-items: stretch">
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
       <nav class="view-selector">
@@ -158,10 +158,20 @@ const showBack = computed(
 
 /* top bar holds title and logout button */
 .topbar {
-  display: grid;
+  display: flex;
-  grid-template-columns: 46px 1fr 46px;
+  align-items: stretch; /* Make children fill the header height */
-  align-items: center;
   padding: 5px 5px;
+  height: 48px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.topbar > div,
+.topbar > nav,
+.topbar > .login-btn {
+  height: 100%;
+  display: flex;
+  align-items: center; /* Center content vertically if needed */
 }
 
 .title {
@@ -172,10 +182,15 @@ const showBack = computed(
 
 /* View Selector styles */
 .view-selector {
-  justify-self: center;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
 }
 
 .view-selector button {
+  height: 100%;
+  display: flex;
+  align-items: center;
   background: #fff;
   color: #667eea;
   border: none;
@@ -225,22 +240,20 @@ const showBack = computed(
   cursor: pointer;
   color: #667eea;
   font-weight: 600;
-  align-self: end;
+  height: 100%; /* Make the button fill its parent */
+  box-sizing: border-box;
+  display: flex;
+  align-items: center; /* Center the text/icon vertically */
 }
 
 .login-btn {
-  align-self: end;
+  align-self: start;
-  height: 100%;
 }
 
 @media (max-width: 480px) {
   .back-btn {
     padding: 0.45rem 0.75rem;
     font-size: 0.6rem;
-    height: 100%;
-  }
-  .login-btn {
-    height: 100%;
   }
 }
 </style>
@@ -254,14 +267,12 @@ const showBack = computed(
   cursor: pointer;
   color: #667eea;
   font-weight: 600;
-  height: 100%;
 }
 
 @media (max-width: 480px) {
   .login-btn button {
     padding: 0.45rem 0.75rem;
     font-size: 0.6rem;
-    height: 100%;
   }
 }
 </style>