round 2

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

@@ -20,9 +20,11 @@ const showBack = computed(() => route.path !== '/child')
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div class="topbar-inner">
-        <button v-if="showBack" class="back-btn" @click="handleBack">← Back</button>
-        <div class="spacer"></div>
+      <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>
@@ -35,71 +37,106 @@ const showBack = computed(() => route.path !== '/child')
 <style scoped>
 .layout-root {
   width: 100%;
-  box-sizing: border-box;
   min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
-
-  /* Reduce top padding */
-  padding: 0.5rem 2rem 2rem 2rem;
+  padding: 0; /* Remove bottom padding */
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-/* top bar holds login button at top-right */
+/* top bar holds title and logout button */
 .topbar {
-  width: 100%;
-  padding: 12px 20px;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-}
-
-.topbar-inner {
-  width: 100%;
-  max-width: 1200px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 76px 1fr 76px;
   align-items: center;
+  padding: 5px 5px;
 }
 
-/* spacer pushes button to the right */
-.spacer {
-  flex: 1;
+.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%;
-  display: flex;
   justify-content: center;
-  align-items: flex-start; /* content starts higher */
+  align-items: flex-start;
   box-sizing: border-box;
-
-  /* Reduce top padding */
-  padding: 4px 20px 40px;
+  min-height: 0;
+  height: 0; /* Ensures children can use 100% height */
+  overflow: hidden; /* Prevents parent from scrolling */
+  overflow-y: visible;
 }
 
-/* back button style */
+/* back button specific styles */
 .back-btn {
   background: white;
   border: 0;
   padding: 0.6rem 1rem;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 0;
   cursor: pointer;
-  margin-bottom: 0;
   color: #667eea;
   font-weight: 600;
-  margin-top: 0;
+  align-self: end;
 }
 
-.back-btn:hover {
-  background-color: #764ba2;
+.login-btn {
+  align-self: end;
 }
 
 @media (max-width: 480px) {
   .back-btn {
     padding: 0.45rem 0.75rem;
     font-size: 0.95rem;
-    margin-bottom: 0.7rem;
   }
 }
 </style>
+
+<style>
+.login-btn button {
+  background: white;
+  border: 0;
+  padding: 0.6rem 1rem;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: #667eea;
+  font-weight: 600;
+}
+</style>

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

@@ -72,7 +72,9 @@ const showBack = computed(
           </svg>
         </button>
         <button
-          :class="{ active: route.name === 'RewardView' }"
+          :class="{
+            active: ['RewardView', 'EditReward', 'CreateReward'].includes(String(route.name)),
+          }"
           @click="router.push({ name: 'RewardView' })"
           aria-label="Rewards"
           title="Rewards"
@@ -121,6 +123,7 @@ const showBack = computed(
   display: grid;
   grid-template-columns: 76px 1fr 76px;
   align-items: center;
+  padding: 5px 5px;
 }
 
 .title {
@@ -166,7 +169,6 @@ const showBack = computed(
 .main-content {
   flex: 1 1 auto;
   width: 100%;
-  display: flex;
   justify-content: center;
   align-items: flex-start;
   box-sizing: border-box;