Wrapped up approval visuals and refresh behaviour

ui/src/pages/RankChange.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import PromotionForm from "@/components/promotions/promotionForm.vue";
 import PromotionList from "@/components/promotions/promotionList.vue";
+import { ref } from "vue";
+
+const listRef = ref<InstanceType<typeof PromotionList>>(null);
 </script>
 
 <template>
-    <div class="mx-auto mt-10 max-w-7xl px-8">
+    <div class="mx-auto mt-10 px-8">
         <div class="flex max-h-[70vh] gap-8">
 
             <!-- LEFT COLUMN -->
-            <div class="flex-1 border-r pr-8">
-                <PromotionList></PromotionList>
+            <div class="flex-1 border-r pr-8 min-w-2xl">
+                <PromotionList ref="listRef"></PromotionList>
             </div>
 
             <!-- RIGHT COLUMN -->
-            <div class="flex-1 flex justify-center pl-8">
+            <div class="flex-1 flex pl-8">
                 <div class="w-full max-w-3xl">
-                    <PromotionForm />
+                    <PromotionForm @submitted="listRef?.refresh" />
                 </div>
             </div>