From a3f19ebbed0263ded6351f577eaf293cb466050e Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 8 Jul 2025 15:15:07 +0200
Subject: [PATCH] make sure time entry information remains visible on mobile
 views

---
 .../js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue  | 6 +++---
 resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue     | 3 +--
 .../packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
index 23075bc8..160f0df0 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
@@ -154,13 +154,13 @@ function onSelectChange(checked: boolean) {
                         "></BillableToggleButton>
                     <div class="flex-1">
                         <button
-                            :class="twMerge('hidden lg:block text-text-secondary w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary', organization?.time_format === '12-hours' ? 'w-[160px]' : 'w-[110px]')"
+                            :class="twMerge('text-text-secondary w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary', organization?.time_format === '12-hours' ? 'w-[160px]' : 'w-[110px]')"
                             @click="expanded = !expanded">
                             {{ formatStartEnd(timeEntry.start, timeEntry.end, organization?.time_format) }}
                         </button>
                     </div>
                     <button
-                        class="text-text-primary min-w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
+                        class="text-text-primary min-w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
                         @click="expanded = !expanded">
                         {{
                             formatHumanReadableDuration(
@@ -173,7 +173,7 @@ function onSelectChange(checked: boolean) {
 
                     <TimeTrackerStartStop
                         :active="!!(timeEntry.start && !timeEntry.end)"
-                        class="opacity-20 hidden sm:flex group-hover:opacity-100 focus-visible:opacity-100"
+                        class="opacity-20 flex group-hover:opacity-100 focus-visible:opacity-100"
                         @changed="
                             onStartStopClick(timeEntry)
                         "></TimeTrackerStartStop>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
index fb75776a..dd2917b2 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
@@ -144,7 +144,6 @@ function onSelectChange(checked : boolean) {
                         "></BillableToggleButton>
                     <div class="flex-1">
                         <TimeEntryRangeSelector
-                            class="hidden lg:block"
                             :start="timeEntry.start"
                             :end="timeEntry.end"
                             :show-date
@@ -160,7 +159,7 @@ function onSelectChange(checked : boolean) {
                         "></TimeEntryRowDurationInput>
                     <TimeTrackerStartStop
                         :active="!!(timeEntry.start && !timeEntry.end)"
-                        class="opacity-20 hidden sm:flex focus-visible:opacity-100 group-hover:opacity-100"
+                        class="opacity-20 flex focus-visible:opacity-100 group-hover:opacity-100"
                         @changed="onStartStopClick"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
index e134926b..0ee7cab4 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
@@ -82,7 +82,7 @@ function selectInput(event: Event) {
         v-model="currentTime"
         data-testid="time_entry_duration_input"
         name="Duration"
-        class="text-text-primary w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
+        class="text-text-primary w-[90px] px-2.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
         @focus="selectInput"
         @keydown.tab="open = false"
         @blur="updateTimerAndStartLiveTimerUpdate"