From 0e37a8bc9ca7b02f34c66ad58eee4218d1ba6a8c Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sat, 17 Jan 2026 00:54:53 -0500
Subject: [PATCH] Improved promotion page readability on mobile

---
 .../components/promotions/promotionForm.vue   |  6 +-
 ui/src/pages/RankChange.vue                   | 82 +++++++++----------
 2 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/ui/src/components/promotions/promotionForm.vue b/ui/src/components/promotions/promotionForm.vue
index a6708f6..6563aa2 100644
--- a/ui/src/components/promotions/promotionForm.vue
+++ b/ui/src/components/promotions/promotionForm.vue
@@ -129,11 +129,7 @@ function setAllToday() {
     <div class="w-xl">
         <form v-if="!formSubmitted" id="trainingForm" @submit.prevent="submitForm"
             class="w-full min-w-0 flex flex-col gap-4">
-            <div>
-                <FieldLegend class="scroll-m-20 text-2xl font-semibold tracking-tight">
-                    Promotion Form
-                </FieldLegend>
-            </div>
+
             <VeeFieldArray name="promotions" v-slot="{ fields, push, remove }">
                 <FieldSet class="w-full min-w-0">
                     <div class="flex flex-col gap-2">
diff --git a/ui/src/pages/RankChange.vue b/ui/src/pages/RankChange.vue
index ec99b33..183b6d9 100644
--- a/ui/src/pages/RankChange.vue
+++ b/ui/src/pages/RankChange.vue
@@ -1,29 +1,48 @@
+<script setup>
+import { ref } from 'vue'
+import { Plus, PlusIcon, X } 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 isMobileFormOpen = ref(false);
+</script>
+
 <template>
     <div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
 
-        <div class="flex items-center justify-between mb-6 lg:hidden">
-            <h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
-
-            <Dialog v-model:open="isFormOpen">
-                <DialogTrigger as-child>
-                    <Button size="sm" class="gap-2">
-                        <Plus class="size-4" />
-                        Promote
+        <div class="flex flex-col items-center justify-between mb-6 lg:hidden">
+            <div v-if="isMobileFormOpen">
+                <div class="mb-4 flex justify-between items-center">
+                    <p class="scroll-m-20 text-2xl font-semibold tracking-tight">
+                        Promotion Form
+                    </p>
+                    <Button variant="ghost" size="icon" @click="isMobileFormOpen = false">
+                        <X v-if="isMobileFormOpen" class="size-6"></X>
                     </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>
+                <PromotionForm @submitted="listRef?.refresh" />
+            </div>
+            <div v-else>
+                <div class="flex justify-between w-full">
+                    <h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
+                    <Button @click="isMobileFormOpen = true">
+                        <PlusIcon />Submit
+                    </Button>
+                </div>
+                <PromotionList></PromotionList>
+            </div>
         </div>
 
-        <div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
+        <div class="hidden lg:flex 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
@@ -41,25 +60,4 @@
             </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>
\ No newline at end of file
+</template>
\ No newline at end of file