made some changes for testing (UI)

web/vue-app/src/App.vue

@@ -12,4 +12,17 @@ body {
   margin: 0;
   padding: 0;
 }
+
+:root {
+  --primary: #667eea;
+  --secondary: #7257b3;
+  --accent: #cbd5e1;
+  --header-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  --button-bg: #fff;
+  --button-active-bg: var(--secondary);
+  --button-hover-bg: #e6eaff;
+  --button-text: var(--primary);
+  --button-active-text: #fff;
+  --app-version: var(--accent);
+}
 </style>

web/vue-app/src/components/child/ParentView.vue

@@ -260,7 +260,6 @@ async function cancelPendingReward() {
   } finally {
     showPendingRewardDialog.value = false
     // After cancelling, proceed to trigger the task if one was selected
-    console.log('Proceeding to trigger task after cancelling pending rewards.', selectedTask.value)
     if (selectedTask.value) {
       showConfirm.value = true
     }

web/vue-app/src/components/reward/ChildRewardList.vue

@@ -240,16 +240,21 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
 }
 
 .reward-card {
-  position: relative; /* Add this for overlay positioning */
+  position: relative;
   background: rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   padding: 0.75rem;
   min-width: 140px;
+  max-width: 220px;
+  width: 100%;
   text-align: center;
   flex-shrink: 0;
   transition: transform 0.18s ease;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .reward-card:hover {
@@ -319,6 +324,7 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
 @media (max-width: 480px) {
   .reward-card {
     min-width: 110px;
+    max-width: 150px;
     padding: 0.6rem;
   }
   .reward-name {

web/vue-app/src/components/reward/RewardList.vue

@@ -177,7 +177,7 @@ const listHeight = computed(() => {
 <style scoped>
 .reward-listbox {
   flex: 1 1 auto;
-  width: auto;
+  width: 100%;
   max-width: 480px;
   /* Subtract any header/nav height if needed, e.g. 4.5rem */
   max-height: calc(100vh - 4.5rem);

web/vue-app/src/components/task/ChildTaskList.vue

@@ -238,12 +238,17 @@ onBeforeUnmount(() => {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 8px;
   padding: 0.75rem;
-  min-width: 110px;
+  min-width: 140px;
+  max-width: 220px;
+  width: 100%;
   text-align: center;
   flex-shrink: 0;
   transition: all 0.2s ease;
   border: 2px solid rgba(255, 255, 255, 0.15);
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 /* Outline colors depending on is_good */
@@ -322,7 +327,8 @@ onBeforeUnmount(() => {
     max-width: 100%;
   }
   .task-card {
-    min-width: 90px;
+    min-width: 100px;
+    max-width: 150px;
     padding: 0.6rem;
   }
   .task-name {

web/vue-app/src/components/task/TaskList.vue

@@ -195,8 +195,8 @@ const filteredTasks = computed(() => {
 <style scoped>
 .task-listbox {
   flex: 1 1 auto;
-  width: auto;
   max-width: 480px;
+  width: 100%;
   /* Subtract any header/nav height if needed, e.g. 4.5rem */
   max-height: calc(100vh - 4.5rem);
   overflow-y: auto;

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

@@ -42,7 +42,7 @@ onMounted(async () => {
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div style="height: 100%; display: flex; align-items: stretch">
+      <div class="back-btn-container">
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
       <nav class="view-selector">
@@ -168,33 +168,26 @@ onMounted(async () => {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  padding: 0; /* Remove bottom padding */
+  padding: 0;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: var(--header-bg);
 }
 
 /* top bar holds title and logout button */
 .topbar {
   display: flex;
-  align-items: stretch; /* Make children fill the header height */
+  align-items: stretch;
   padding: 5px 5px;
   height: 48px;
   width: 100%;
   box-sizing: border-box;
-  justify-content: space-evenly;
 }
 
-.topbar > div,
+.back-btn-container {
-.topbar > nav,
-.topbar > .login-btn {
   height: 100%;
   display: flex;
-  align-items: center; /* Center content vertically if needed */
+  align-items: stretch;
-}
+  flex: 1 1 0;
-
+  justify-content: flex-start;
-.title {
-  font-size: 1.5rem;
-  color: white;
-  margin: 0;
 }
 
 /* View Selector styles */
@@ -202,15 +195,17 @@ onMounted(async () => {
   height: 100%;
   display: flex;
   align-items: stretch;
+  flex: 2 1 0;
+  justify-content: center;
 }
 
 .view-selector button {
   height: 100%;
   display: flex;
   align-items: center;
-  background: #fff;
+  background: var(--button-bg);
-  color: #667eea;
+  color: var(--button-text);
-  border: none;
+  border: 0;
   border-radius: 8px 8px 0 0;
   padding: 0.6rem 1.2rem;
   font-weight: 600;
@@ -223,16 +218,16 @@ onMounted(async () => {
 }
 
 .view-selector button.active {
-  background: #7257b3;
+  background: var(--button-active-bg);
-  color: #fff;
+  color: var(--button-active-text);
 }
 
 .view-selector button.active svg {
-  stroke: #fff;
+  stroke: var(--button-active-text);
 }
 
 .view-selector button:hover:not(.active) {
-  background: #e6eaff;
+  background: var(--button-hover-bg);
 }
 
 /* main content remains centered */
@@ -250,12 +245,12 @@ onMounted(async () => {
 
 /* back button specific styles */
 .back-btn {
-  background: white;
+  background: var(--button-bg);
   border: 0;
   padding: 0.6rem 1rem;
   border-radius: 8px 8px 0 0;
   cursor: pointer;
-  color: #667eea;
+  color: var(--button-text);
   font-weight: 600;
   height: 100%; /* Make the button fill its parent */
   box-sizing: border-box;
@@ -264,7 +259,11 @@ onMounted(async () => {
 }
 
 .login-btn {
-  align-self: start;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  justify-content: flex-end;
 }
 
 .app-version {
@@ -272,7 +271,7 @@ onMounted(async () => {
   right: 18px;
   bottom: 12px;
   font-size: 0.92rem;
-  color: #cbd5e1; /* Brighter slate-200 */
+  color: var(--app-version);
   opacity: 0.85;
   z-index: 100;
   pointer-events: none;
@@ -281,28 +280,11 @@ onMounted(async () => {
 }
 
 @media (max-width: 480px) {
-  .back-btn {
+  .back-btn,
+  .login-btn button,
+  .view-selector button {
     padding: 0.45rem 0.75rem;
-    font-size: 0.6rem;
+    font-size: 0.85rem;
-  }
-}
-</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;
-}
-
-@media (max-width: 480px) {
-  .login-btn button {
-    padding: 0.45rem 0.75rem;
-    font-size: 0.6rem;
   }
 }
 </style>