made some changes for testing (UI)

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;