From bae5578afb995a21863cfdc4d22d23d1b7ebff0b Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sat, 21 Mar 2026 23:58:12 -0400
Subject: [PATCH] Reworked spacing and layout to improve mobile experience

---
 ui/src/components/loa/loaForm.vue | 28 ++++++++++++++--------------
 ui/src/pages/ManageLOA.vue        |  2 +-
 ui/src/pages/SubmitLOA.vue        |  2 +-
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/loa/loaForm.vue b/ui/src/components/loa/loaForm.vue
index cfa2077..85b9183 100644
--- a/ui/src/components/loa/loaForm.vue
+++ b/ui/src/components/loa/loaForm.vue
@@ -169,16 +169,16 @@ const filteredMembers = computed(() => {
 </script>
 
 <template>
-    <div class="flex flex-row-reverse gap-6 mx-auto w-full" :class="!adminMode ? 'max-w-5xl' : 'max-w-5xl'">
-        <div v-if="!adminMode" class="flex-1 flex flex-col space-x-4 rounded-md border p-4">
+    <div class="mx-auto flex w-full max-w-5xl flex-col gap-4 lg:flex-row-reverse lg:gap-6">
+        <div v-if="!adminMode" class="order-2 flex flex-1 flex-col rounded-md border p-4 lg:order-1">
             <p class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Policy</p>
             <div ref="policyRef" class="bookstack-container">
                 <!-- LOA policy gets loaded here -->
             </div>
         </div>
-        <div class="flex-1 flex flex-col gap-5">
+        <div class="order-1 flex flex-1 flex-col gap-5 lg:order-2">
             <form v-if="!formSubmitted" @submit="onSubmit" class="flex flex-col gap-2">
-                <div class="flex w-full gap-5">
+                <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5">
                     <VeeField v-slot="{ field, errors }" name="member_id">
                         <Field>
                             <FieldContent>
@@ -237,13 +237,13 @@ const filteredMembers = computed(() => {
                         </Field>
                     </VeeField>
                 </div>
-                <div class="flex gap-5">
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5">
                     <VeeField v-slot="{ field, errors }" name="start_date">
-                        <Field>
+                        <Field class="w-full">
                             <FieldContent>
                                 <FieldLabel>Start Date</FieldLabel>
                                 <Popover>
-                                    <div class="relative inline-flex items-center group">
+                                    <div class="group relative flex w-full items-center">
                                         <PopoverTrigger as-child>
                                             <Button :disabled="!values.type" variant="outline" :class="cn(
                                                 'w-full justify-start text-left font-normal',
@@ -259,7 +259,7 @@ const filteredMembers = computed(() => {
                                                     text-popover-foreground shadow-md border border-border
                                                     opacity-0 translate-y-1
                                                     group-hover:opacity-100 group-hover:translate-y-0
-                                                    transition-opacity transition-transform duration-150">
+                                                    transition-all duration-150">
                                             Select an LOA type first
                                         </div>
                                     </div>
@@ -277,11 +277,11 @@ const filteredMembers = computed(() => {
                         </Field>
                     </VeeField>
                     <VeeField v-slot="{ field, errors }" name="end_date">
-                        <Field>
+                        <Field class="w-full">
                             <FieldContent>
                                 <FieldLabel>End Date</FieldLabel>
                                 <Popover>
-                                    <div class="relative inline-flex items-center group">
+                                    <div class="group relative flex w-full items-center">
                                         <PopoverTrigger as-child>
                                             <Button :disabled="!values.type" variant="outline" :class="cn(
                                                 'w-full justify-start text-left font-normal',
@@ -297,7 +297,7 @@ const filteredMembers = computed(() => {
                                                     text-popover-foreground shadow-md border border-border
                                                     opacity-0 translate-y-1
                                                     group-hover:opacity-100 group-hover:translate-y-0
-                                                    transition-opacity transition-transform duration-150">
+                                                    transition-all duration-150">
                                             Select an LOA type first
                                         </div>
                                     </div>
@@ -330,8 +330,8 @@ const filteredMembers = computed(() => {
                         </Field>
                     </VeeField>
                 </div>
-                <div class="flex justify-end">
-                    <Button type="submit" :disabled="submitting" class="w-35">
+                <div class="flex justify-stretch sm:justify-end">
+                    <Button type="submit" :disabled="submitting" class="w-full sm:w-35">
                         <span class="flex items-center gap-2" v-if="submitting">
                             <Spinner></Spinner> Submitting…
                         </span>
@@ -352,7 +352,7 @@ const filteredMembers = computed(() => {
                 </p>
 
 
-                <div class="flex gap-3 mt-4">
+                <div class="mt-4 flex flex-col gap-3 sm:flex-row">
                     <Button variant="secondary" @click="formSubmitted = false">
                         Submit another request
                     </Button>
diff --git a/ui/src/pages/ManageLOA.vue b/ui/src/pages/ManageLOA.vue
index 37512ac..f3b15b8 100644
--- a/ui/src/pages/ManageLOA.vue
+++ b/ui/src/pages/ManageLOA.vue
@@ -29,7 +29,7 @@ const showLOADialog = ref(false);
                 <LoaForm :admin-mode="true" class="my-3"></LoaForm>
             </DialogContent>
         </Dialog>
-        <div class="max-w-5xl mx-auto pt-10">
+        <div class="mx-auto max-w-5xl px-3 pt-10 sm:px-4 lg:px-0">
             <div class="flex justify-between mb-4">
                 <h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Log</h1>
                 <div>
diff --git a/ui/src/pages/SubmitLOA.vue b/ui/src/pages/SubmitLOA.vue
index 4d08fa6..de1ce74 100644
--- a/ui/src/pages/SubmitLOA.vue
+++ b/ui/src/pages/SubmitLOA.vue
@@ -11,7 +11,7 @@ const mode = ref<'submit' | 'view'>('submit')
 </script>
 
 <template>
-    <div class="max-w-5xl mx-auto flex w-full flex-col mt-4 mb-10">
+    <div class="mx-auto mt-4 mb-10 flex w-full max-w-5xl flex-col px-3 sm:px-4 lg:px-0">
         <div class="mb-8">
             <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Leave of Absence</p>
             <div class="pt-3">