made some changes for testing (UI)

api/child_api.py

@@ -515,7 +515,7 @@ def reward_status(id):
         status = RewardStatus(reward.id, reward.name, points_needed, reward.cost, pending is not None, reward.image_id)
         statuses.append(status.to_dict())
 
-    statuses.sort(key=lambda s: s['cost'])
+    statuses.sort(key=lambda s: (not s['redeeming'], s['cost']))
     return jsonify({'reward_status': statuses}), 200
 
 

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

@@ -238,6 +238,11 @@ const isAnyPending = computed(() => rewards.value.some((r) => r.redeeming))
   padding: 0.5rem 0;
 }
 
+/* Fallback for browsers that don't support flex gap */
+.reward-card + .reward-card {
+  margin-left: 0.75rem;
+}
+
 .reward-card {
   position: relative;
   background: rgba(255, 255, 255, 0.12);

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

@@ -233,6 +233,10 @@ onBeforeUnmount(() => {
   padding: 0.5rem 0;
 }
 
+/* Fallback for browsers that don't support flex gap */
+.task-card + .task-card {
+  margin-left: 0.75rem;
+}
 .task-card {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 8px;