From 73c92fad4753b6abadc338a420e2b2adfafa9125 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 3 Feb 2026 14:30:56 +0100
Subject: [PATCH] fix responsive issues in timetracker recently tracked entries
 dropdown

---
 .../ui/src/TimeTracker/TimeTrackerControls.vue         |  4 ++--
 .../TimeTracker/TimeTrackerRecentlyTrackedEntry.vue    | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
index 0c469c2b..4c6e1039 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
@@ -222,10 +222,10 @@ useSelectEvents(
                 <div
                     v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
                     ref="floating"
-                    class="z-50 w-full max-w-2xl"
+                    class="z-50 w-[min(500px,100vw-2rem)]"
                     :style="floatingStyles">
                     <div
-                        class="rounded-lg w-full fixed min-w-xl top-0 left-0 border border-card-border overflow-none shadow-dropdown bg-card-background">
+                        class="rounded-lg w-full border border-card-border overflow-hidden shadow-dropdown bg-card-background">
                         <div
                             class="text-text-tertiary text-xs font-semibold border-b border-border-tertiary px-2 py-1.5">
                             Recently Tracked Time Entries
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue
index d06ae821..a539c6cc 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue
@@ -28,19 +28,21 @@ const task = computed(() => {
         :data-select-id="timeEntry.id"
         :class="
             twMerge(
-                'px-2 py-1.5 flex justify-between items-center space-x-2 w-full rounded',
+                'px-2 py-1.5 flex items-center space-x-2 w-full rounded text-left',
                 props.highlighted && 'bg-card-background-active'
             )
         ">
-        <span v-if="timeEntry.description !== ''" class="text-sm font-medium">
+        <span
+            v-if="timeEntry.description !== ''"
+            class="text-sm font-medium truncate min-w-0 flex-1">
             {{ timeEntry.description }}
         </span>
-        <span v-else class="text-sm text-text-tertiary font-medium"> No Description </span>
+        <span v-else class="text-sm text-text-tertiary font-medium flex-1"> No Description </span>
         <ProjectBadge
             ref="projectDropdownTrigger"
             :color="project?.color"
             :name="project?.name"
-            class="">
+            class="shrink-0">
             <div v-if="project" class="flex items-center lg:space-x-1 min-w-0">
                 <span class="whitespace-nowrap text-xs">
                     {{ project?.name }}