a few mobile improvements

ui/src/pages/RankChange.vue

@@ -1,27 +1,65 @@
-<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 px-8">
-        <div class="flex max-h-[70vh] gap-8">
+    <div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
 
-            <!-- LEFT COLUMN -->
-            <div class="flex-1 border-r pr-8 min-w-2xl">
-                <PromotionList ref="listRef"></PromotionList>
-            </div>
+        <div class="flex items-center justify-between mb-6 lg:hidden">
+            <h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
 
-            <!-- RIGHT COLUMN -->
-            <div class="flex-1 flex pl-8">
-                <div class="w-full max-w-3xl">
-                    <PromotionForm @submitted="listRef?.refresh" />
+            <Dialog v-model:open="isFormOpen">
+                <DialogTrigger as-child>
+                    <Button size="sm" class="gap-2">
+                        <Plus class="size-4" />
+                        Promote
+                    </Button>
+                </DialogTrigger>
+                <DialogContent class="w-full h-full max-w-none m-0 rounded-none flex flex-col">
+                    <DialogHeader class="flex-row items-center justify-between border-b pb-4">
+                        <DialogTitle>New Promotion</DialogTitle>
+                    </DialogHeader>
+
+                    <div class="flex-1 overflow-y-auto pt-6">
+                        <PromotionForm @submitted="handleMobileSubmit" />
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </div>
+
+        <div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
+            <div class="flex-1 lg:border-r lg:pr-8 w-full lg:min-w-2xl">
+                <p class="hidden lg:block scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
+                    Promotion History
+                </p>
+                <div class="overflow-y-auto lg:max-h-full">
+                    <PromotionList ref="listRef"></PromotionList>
                 </div>
             </div>
 
+            <div class="hidden lg:flex flex-1 pl-8">
+                <div class="w-full max-w-3xl">
+                    <p class="text-2xl font-semibold tracking-tight mb-3">New Promotion</p>
+                    <PromotionForm @submitted="listRef?.refresh" />
+                </div>
+            </div>
         </div>
     </div>
 </template>
+
+<script setup>
+import { ref } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import PromotionForm from '@/components/promotions/promotionForm.vue'
+import PromotionList from '@/components/promotions/promotionList.vue'
+import DialogContent from '@/components/ui/dialog/DialogContent.vue'
+import Dialog from '@/components/ui/dialog/Dialog.vue'
+import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
+import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
+import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const isFormOpen = ref(false)
+const listRef = ref(null)
+
+const handleMobileSubmit = () => {
+    isFormOpen.value = false // Close the "Whole page" modal
+    listRef.value?.refresh()  // Refresh the list behind it
+}
+</script>