From dc98151d4232e9a840aa3cd3e465d937496c1ab2 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 10 Feb 2026 17:18:49 +0100
Subject: [PATCH] responsive time entry modal fixes

---
 .../ui/src/TimeEntry/TimeEntryCreateModal.vue | 41 +++++++---------
 .../ui/src/TimeEntry/TimeEntryEditModal.vue   | 49 ++++++++-----------
 .../TimeTrackerProjectTaskDropdown.vue        |  6 +--
 3 files changed, 41 insertions(+), 55 deletions(-)

diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
index f30bc4e6..727f6700 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
@@ -159,7 +159,7 @@ const billableProxy = computed({
                         @keydown.enter="submit" />
                 </div>
             </div>
-            <div class="flex flex-col sm:flex-row sm:items-end gap-2 sm:gap-4 pt-4">
+            <div class="flex flex-col sm:flex-row sm:items-end gap-2 pt-4">
                 <div class="flex-1 min-w-0">
                     <TimeTrackerProjectTaskDropdown
                         v-model:project="timeEntry.project_id"
@@ -206,8 +206,8 @@ const billableProxy = computed({
                     </Select>
                 </div>
             </div>
-            <div class="flex flex-col sm:flex-row gap-4 pt-4">
-                <Field class="flex-1">
+            <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 pt-4">
+                <Field class="col-span-2 sm:col-span-3">
                     <FieldLabel>Duration</FieldLabel>
                     <div class="space-y-2 flex flex-col">
                         <DurationHumanInput
@@ -224,27 +224,20 @@ const billableProxy = computed({
                         </div>
                     </div>
                 </Field>
-                <div class="grid grid-cols-2 sm:flex gap-4">
-                    <Field>
-                        <FieldLabel>Start</FieldLabel>
-                        <div class="flex flex-col gap-2 sm:w-28">
-                            <TimePickerSimple
-                                v-model="localStart"
-                                class="w-full"></TimePickerSimple>
-                            <DatePicker
-                                v-model="localStart"
-                                class="w-full"
-                                tabindex="1"></DatePicker>
-                        </div>
-                    </Field>
-                    <Field>
-                        <FieldLabel>End</FieldLabel>
-                        <div class="flex flex-col gap-2 sm:w-28">
-                            <TimePickerSimple v-model="localEnd" class="w-full"></TimePickerSimple>
-                            <DatePicker v-model="localEnd" class="w-full" tabindex="1"></DatePicker>
-                        </div>
-                    </Field>
-                </div>
+                <Field>
+                    <FieldLabel>Start</FieldLabel>
+                    <div class="flex flex-col gap-2">
+                        <TimePickerSimple v-model="localStart" class="w-full"></TimePickerSimple>
+                        <DatePicker v-model="localStart" class="w-full" tabindex="1"></DatePicker>
+                    </div>
+                </Field>
+                <Field>
+                    <FieldLabel>End</FieldLabel>
+                    <div class="flex flex-col gap-2">
+                        <TimePickerSimple v-model="localEnd" class="w-full"></TimePickerSimple>
+                        <DatePicker v-model="localEnd" class="w-full" tabindex="1"></DatePicker>
+                    </div>
+                </Field>
             </div>
         </template>
         <template #footer>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue
index 666c2bc0..81dca82f 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue
@@ -214,8 +214,8 @@ const billableProxy = computed({
                         </Select>
                     </div>
                 </div>
-                <div class="flex flex-col sm:flex-row gap-4 pt-4">
-                    <Field class="flex-1">
+                <div class="grid grid-cols-2 sm:grid-cols-5 gap-4 pt-4">
+                    <Field class="col-span-2 sm:col-span-3">
                         <FieldLabel>Duration</FieldLabel>
                         <div class="space-y-2 flex flex-col">
                             <DurationHumanInput
@@ -232,32 +232,25 @@ const billableProxy = computed({
                             </div>
                         </div>
                     </Field>
-                    <div class="grid grid-cols-2 sm:flex gap-4">
-                        <Field>
-                            <FieldLabel>Start</FieldLabel>
-                            <div class="flex flex-col gap-2 sm:w-28">
-                                <TimePickerSimple
-                                    v-model="localStart"
-                                    class="w-full"></TimePickerSimple>
-                                <DatePicker
-                                    v-model="localStart"
-                                    class="w-full"
-                                    tabindex="1"></DatePicker>
-                            </div>
-                        </Field>
-                        <Field>
-                            <FieldLabel>End</FieldLabel>
-                            <div class="flex flex-col gap-2 sm:w-28">
-                                <TimePickerSimple
-                                    v-model="localEnd"
-                                    class="w-full"></TimePickerSimple>
-                                <DatePicker
-                                    v-model="localEnd"
-                                    class="w-full"
-                                    tabindex="1"></DatePicker>
-                            </div>
-                        </Field>
-                    </div>
+                    <Field>
+                        <FieldLabel>Start</FieldLabel>
+                        <div class="flex flex-col gap-2">
+                            <TimePickerSimple
+                                v-model="localStart"
+                                class="w-full"></TimePickerSimple>
+                            <DatePicker
+                                v-model="localStart"
+                                class="w-full"
+                                tabindex="1"></DatePicker>
+                        </div>
+                    </Field>
+                    <Field>
+                        <FieldLabel>End</FieldLabel>
+                        <div class="flex flex-col gap-2">
+                            <TimePickerSimple v-model="localEnd" class="w-full"></TimePickerSimple>
+                            <DatePicker v-model="localEnd" class="w-full" tabindex="1"></DatePicker>
+                        </div>
+                    </Field>
                 </div>
             </div>
         </template>
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index d6e5cf99..f19eba60 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -514,14 +514,14 @@ const showCreateProject = ref(false);
                 <Button
                     :variant="props.variant"
                     :size="props.size"
-                    :class="twMerge('w-full justify-start', props.class)">
+                    :class="twMerge('w-full justify-start overflow-hidden', props.class)">
                     <div
                         class="w-3 h-3 rounded-full shrink-0"
                         :style="{ backgroundColor: selectedProjectColor }"></div>
-                    <span class="truncate">{{ selectedProjectName }}</span>
+                    <span class="truncate shrink-[1] pr-1">{{ selectedProjectName }}</span>
                     <template v-if="currentTask">
                         <ChevronRightIcon class="w-4 h-4 text-text-tertiary shrink-0" />
-                        <span class="truncate">{{ currentTask.name }}</span>
+                        <span class="truncate shrink-[100]">{{ currentTask.name }}</span>
                     </template>
                 </Button>
                 <button