From c81c424c5a529ee9b360760fd3431201c0659563 Mon Sep 17 00:00:00 2001
From: Mateo <carciu98@gmail.com>
Date: Fri, 17 Apr 2026 13:23:15 +0200
Subject: [PATCH] fix: enhance task creation modal layout and improve form
 structure

---
 .../js/components/tasks/TaskCreateDialog.vue  | 130 ++++++++++--------
 1 file changed, 69 insertions(+), 61 deletions(-)

diff --git a/resources/js/components/tasks/TaskCreateDialog.vue b/resources/js/components/tasks/TaskCreateDialog.vue
index 62cb0ec..6ffb205 100644
--- a/resources/js/components/tasks/TaskCreateDialog.vue
+++ b/resources/js/components/tasks/TaskCreateDialog.vue
@@ -65,70 +65,78 @@ const submit = () => {
                 New Task
             </Button>
         </DialogTrigger>
-        <DialogContent @open-auto-focus.prevent>
-            <DialogHeader>
-                <DialogTitle>Create a new task</DialogTitle>
-                <DialogDescription>
-                    Add a task to your team's list
-                </DialogDescription>
-            </DialogHeader>
+        <DialogContent
+            class="w-[96vw] max-w-[980px] overflow-hidden p-0 sm:max-w-[980px]"
+            @open-auto-focus.prevent
+        >
+            <div class="max-h-[92vh] overflow-y-auto overscroll-contain p-6">
+                <DialogHeader>
+                    <DialogTitle>Create a new task</DialogTitle>
+                    <DialogDescription>
+                        Add a task to your team's list
+                    </DialogDescription>
+                </DialogHeader>
 
-            <form @submit.prevent="submit" class="space-y-4">
-                <div class="grid gap-2">
-                    <Label for="task-title">Title</Label>
-                    <Input
-                        id="task-title"
-                        type="text"
-                        placeholder="Enter task title..."
-                        v-model="form.title"
-                    />
-                    <InputError :message="form.errors.title" />
-                </div>
-                <div class="grid gap-2">
-                    <Label for="task-description">Description</Label>
-                    <TaskRichTextEditor
-                        v-model="form.description"
-                        placeholder="Add more details..."
-                    />
-                    <InputError :message="form.errors.description" />
-                </div>
-                <div class="grid gap-2">
-                    <Label for="task-due-date">Due date</Label>
-                    <Input
-                        id="task-due-date"
-                        type="datetime-local"
-                        v-model="form.due_date"
-                    />
-                    <InputError :message="form.errors.due_date" />
-                </div>
+                <form @submit.prevent="submit" class="space-y-4">
+                    <div class="grid gap-2">
+                        <Label for="task-title">Title</Label>
+                        <Input
+                            id="task-title"
+                            type="text"
+                            placeholder="Enter task title..."
+                            v-model="form.title"
+                        />
+                        <InputError :message="form.errors.title" />
+                    </div>
+                    <div class="grid gap-2">
+                        <Label for="task-description">Description</Label>
+                        <TaskRichTextEditor
+                            v-model="form.description"
+                            placeholder="Add more details..."
+                            min-height="20rem"
+                        />
+                        <InputError :message="form.errors.description" />
+                    </div>
+                    <div class="grid gap-2 sm:grid-cols-2">
+                        <div class="grid gap-2">
+                            <Label for="task-due-date">Due date</Label>
+                            <Input
+                                id="task-due-date"
+                                type="datetime-local"
+                                v-model="form.due_date"
+                            />
+                            <InputError :message="form.errors.due_date" />
+                        </div>
 
-                <div class="grid gap-2">
-                    <Label>Assigned to</Label>
-                    <TaskAssigneeSelect
-                        v-model="form.assigned_to"
-                        :team-members="teamMembers"
-                    />
-                    <InputError :message="form.errors.assigned_to" />
-                </div>
+                        <div class="grid gap-2">
+                            <Label>Assigned to</Label>
+                            <TaskAssigneeSelect
+                                v-model="form.assigned_to"
+                                :team-members="teamMembers"
+                            />
+                            <InputError :message="form.errors.assigned_to" />
+                        </div>
+                    </div>
 
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        @click="isOpen = false"
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        type="submit"
-                        :disabled="!form.isDirty || form.processing"
-                    >
-                        <Spinner v-if="form.processing" />
-                        <Plus v-else class="size-4" />
-                        Add task
-                    </Button>
-                </DialogFooter>
-            </form>
+                    <DialogFooter>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            @click="isOpen = false"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            type="submit"
+                            :disabled="!form.isDirty || form.processing"
+                        >
+                            <Spinner v-if="form.processing" />
+                            <Plus v-else class="size-4" />
+                            Add task
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </div>
         </DialogContent>
     </Dialog>
 </template>