Improve Time page responsiveness and compact tags, fixes #896

resources/js/Pages/Time.vue

@@ -114,7 +114,7 @@ function deleteSelected() {
             :tags="tags"
             :currency="getOrganizationCurrencyString()"
             :clients="clients"
-            class="border-t border-default-background-separator"
+            class="border-t border-default-background-separator hidden sm:block"
             :update-time-entries="
                 (args) =>
                     updateTimeEntries(

resources/js/packages/ui/src/Badge.vue

@@ -47,7 +47,7 @@ const tagClasses = computed(() => {
                 tagClasses,
                 badgeClasses[size],
                 borderClasses,
-                'rounded transition inline-flex items-center font-medium text-text-primary disabled:text-text-quaternary outline-0  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                'rounded transition inline-flex items-center font-medium text-text-primary disabled:text-text-quaternary outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring min-w-0 overflow-hidden',
                 props.class
             )
         ">

resources/js/packages/ui/src/MainContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div class="px-3 sm:px-4 lg:px-6 mx-auto">
+    <div class="px-2 sm:px-4 lg:px-6 mx-auto">
         <slot></slot>
     </div>
 </template>

resources/js/packages/ui/src/Tag/TagBadge.vue

@@ -11,12 +11,14 @@ const props = withDefaults(
         class?: string;
         color?: string;
         border?: boolean;
+        showIcon?: boolean;
     }>(),
     {
         size: 'base',
         tag: 'div',
         color: 'var(--theme-color-icon-default)',
         border: true,
+        showIcon: true,
     }
 );
 
@@ -28,7 +30,7 @@ const indicatorClasses = {
 
 <template>
     <Badge :name :size :tag :class="props.class" :color :border>
-        <TagIcon :class="twMerge(indicatorClasses[size])"></TagIcon>
+        <TagIcon v-if="showIcon" :class="twMerge(indicatorClasses[size])"></TagIcon>
         <span v-if="name">
             {{ name }}
         </span>

resources/js/packages/ui/src/Tag/TagDropdown.vue

@@ -23,9 +23,11 @@ const props = withDefaults(
         tags: Tag[];
         createTag: (name: string) => Promise<Tag | undefined>;
         align?: 'center' | 'end' | 'start';
+        showNoTagOption?: boolean;
     }>(),
     {
         align: 'start',
+        showNoTagOption: true,
     }
 );
 
@@ -55,6 +57,7 @@ const filteredTags = computed(() => {
 });
 
 const showNoTag = computed(() => {
+    if (!props.showNoTagOption) return false;
     const search = searchValue.value.toLowerCase().trim();
     if (!search) return true;
     return NO_TAG_LABEL.toLowerCase().includes(search);
@@ -101,7 +104,7 @@ const showCreateTagModal = ref(false);
         <template #content>
             <ComboboxRoot
                 v-model:search-term="searchValue"
-                :open="open"
+                :open="true"
                 class="p-2"
                 :filter-function="(val: string[]) => val">
                 <ComboboxAnchor>

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -94,7 +94,8 @@ function onSelectChange(checked: boolean) {
         data-testid="time_entry_row">
         <MainContainer class="min-w-0">
             <div class="@xl:flex py-2 items-center min-w-0 justify-between group">
-                <div class="flex space-x-3 items-center min-w-0">
+                <!-- Desktop layout -->
+                <div class="hidden @lg:flex space-x-3 items-center min-w-0">
                     <Checkbox
                         :checked="
                             timeEntry.timeEntries.every((aggregateTimeEntry: TimeEntry) =>
@@ -107,10 +108,11 @@ function onSelectChange(checked: boolean) {
                             {{ timeEntry?.timeEntries?.length }}
                         </GroupedItemsCountButton>
                         <TimeEntryDescriptionInput
-                            class="min-w-0 mr-4"
+                            class="min-w-0 mr-4 shrink"
                             :model-value="timeEntry.description"
                             @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
                         <TimeTrackerProjectTaskDropdown
+                            class="min-w-0 shrink"
                             :clients
                             :create-project
                             :create-client
@@ -125,7 +127,8 @@ function onSelectChange(checked: boolean) {
                             @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
                     </div>
                 </div>
-                <div class="flex items-center font-medium space-x-1 @lg:space-x-2">
+                <div
+                    class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
                     <TimeEntryRowTagDropdown
                         :create-tag
                         :tags="tags"
@@ -180,6 +183,74 @@ function onSelectChange(checked: boolean) {
                             deleteTimeEntries(timeEntry?.timeEntries ?? [])
                         "></TimeEntryMoreOptionsDropdown>
                 </div>
+                <!-- Mobile layout -->
+                <div class="@lg:hidden">
+                    <!-- First row: count + description + duration -->
+                    <div class="flex items-center justify-between min-w-0">
+                        <div class="flex items-center min-w-0 flex-1">
+                            <GroupedItemsCountButton
+                                :expanded="expanded"
+                                @click="expanded = !expanded">
+                                {{ timeEntry?.timeEntries?.length }}
+                            </GroupedItemsCountButton>
+                            <TimeEntryDescriptionInput
+                                class="min-w-0 flex-1"
+                                :model-value="timeEntry.description"
+                                @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                        </div>
+                        <button
+                            class="text-text-primary min-w-[80px] px-1.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(
+                                    timeEntry.duration ?? 0,
+                                    organization?.interval_format,
+                                    organization?.number_format
+                                )
+                            }}
+                        </button>
+                    </div>
+                    <!-- Second row: project/task - tags - billable - start - more -->
+                    <div class="flex items-center justify-between mt-1">
+                        <TimeTrackerProjectTaskDropdown
+                            class="min-w-0"
+                            :clients
+                            :create-project
+                            :create-client
+                            :can-create-project
+                            :projects="projects"
+                            :tasks="tasks"
+                            :show-badge-border="false"
+                            :project="timeEntry.project_id"
+                            :enable-estimated-time
+                            :currency="currency"
+                            :task="timeEntry.task_id"
+                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                        <div class="flex items-center shrink-0">
+                            <TimeEntryRowTagDropdown
+                                :create-tag
+                                :tags="tags"
+                                :model-value="timeEntry.tags"
+                                compact
+                                @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
+                            <BillableToggleButton
+                                :model-value="timeEntry.billable"
+                                size="small"
+                                @changed="updateTimeEntryBillable"></BillableToggleButton>
+                            <TimeTrackerStartStop
+                                :active="!!(timeEntry.start && !timeEntry.end)"
+                                variant="secondary"
+                                class="ml-2"
+                                @changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
+                            <TimeEntryMoreOptionsDropdown
+                                :show-edit="false"
+                                :show-duplicate="false"
+                                @delete="
+                                    deleteTimeEntries(timeEntry?.timeEntries ?? [])
+                                "></TimeEntryMoreOptionsDropdown>
+                        </div>
+                    </div>
+                </div>
             </div>
         </MainContainer>
         <div

resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue

@@ -31,11 +31,11 @@ const displaysPlaceholder = computed(() => {
 </script>
 
 <template>
-    <div class="relative min-w-0 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">
+    <div class="relative min-w-0 text-ellipsis whitespace-nowrap overflow-hidden">
         <div class="relative text-sm font-medium min-w-0">
             <div
                 :class="[
-                    'opacity-0 h-4 text-sm whitespace-pre font-medium min-w-0 pl-3 pr-1',
+                    'opacity-0 h-4 text-sm whitespace-pre font-medium min-w-0 pl-1.5 @lg:pl-3 pr-1',
                     { 'min-w-[130px]': displaysPlaceholder },
                 ]">
                 {{ liveDataValue }}
@@ -44,7 +44,7 @@ const displaysPlaceholder = computed(() => {
                 data-testid="time_entry_description"
                 :value="liveDataValue"
                 placeholder="Add a description"
-                class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm text-text-primary font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0"
+                class="absolute px-0 h-full min-w-0 pl-1.5 @lg:pl-3 pr-1 left-0 top-0 w-full text-sm text-text-primary font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0"
                 @blur="onChange"
                 @input="onInput"
                 @keydown.enter="onChange" />

resources/js/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue

@@ -63,7 +63,7 @@ const showMassUpdateModal = ref(false);
         :class="
             twMerge(
                 props.class,
-                'text-sm py-1.5 font-medium flex border-b border-border-primary items-center space-x-3'
+                'text-sm py-1.5 font-medium hidden sm:flex border-b border-border-primary items-center space-x-3'
             )
         ">
         <Checkbox

resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue

@@ -113,14 +113,16 @@ async function handleDeleteTimeEntry() {
         data-testid="time_entry_row">
         <MainContainer class="min-w-0">
             <div class="@xl:flex py-2 min-w-0 items-center justify-between group">
-                <div class="flex items-center min-w-0">
+                <!-- Desktop layout -->
+                <div class="hidden @lg:flex items-center min-w-0">
                     <Checkbox :checked="selected" @update:checked="onSelectChange" />
                     <div v-if="indent === true" class="w-10 h-7"></div>
                     <TimeEntryDescriptionInput
-                        class="min-w-0 mr-4"
+                        class="min-w-0 mr-4 shrink"
                         :model-value="timeEntry.description"
                         @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
                     <TimeTrackerProjectTaskDropdown
+                        class="min-w-0 shrink"
                         :create-project
                         :create-client
                         :can-create-project
@@ -134,7 +136,8 @@ async function handleDeleteTimeEntry() {
                         :task="timeEntry.task_id"
                         @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
                 </div>
-                <div class="flex items-center font-medium space-x-1 @lg:space-x-2">
+                <div
+                    class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
                     <div v-if="showMember && members" class="text-sm px-2">
                         {{ memberName }}
                     </div>
@@ -171,6 +174,58 @@ async function handleDeleteTimeEntry() {
                         @duplicate="duplicateTimeEntry"
                         @delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
                 </div>
+                <!-- Mobile layout -->
+                <div class="@lg:hidden">
+                    <!-- First row: description + duration -->
+                    <div class="flex items-center justify-between min-w-0">
+                        <TimeEntryDescriptionInput
+                            class="min-w-0 flex-1"
+                            :model-value="timeEntry.description"
+                            @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                        <TimeEntryRowDurationInput
+                            :start="timeEntry.start"
+                            :end="timeEntry.end"
+                            @changed="updateStartEndTime"></TimeEntryRowDurationInput>
+                    </div>
+                    <!-- Second row: project/task - tags - billable - start - more -->
+                    <div class="flex items-center justify-between mt-1">
+                        <TimeTrackerProjectTaskDropdown
+                            class="min-w-0"
+                            :create-project
+                            :create-client
+                            :can-create-project
+                            :clients
+                            :projects="projects"
+                            :tasks="tasks"
+                            :show-badge-border="false"
+                            :project="timeEntry.project_id"
+                            :currency="currency"
+                            :enable-estimated-time
+                            :task="timeEntry.task_id"
+                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                        <div class="flex items-center shrink-0">
+                            <TimeEntryRowTagDropdown
+                                :create-tag
+                                :tags="tags"
+                                :model-value="timeEntry.tags"
+                                compact
+                                @changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
+                            <BillableToggleButton
+                                :model-value="timeEntry.billable"
+                                size="small"
+                                @changed="updateTimeEntryBillable"></BillableToggleButton>
+                            <TimeTrackerStartStop
+                                :active="!!(timeEntry.start && !timeEntry.end)"
+                                variant="secondary"
+                                class="ml-2"
+                                @changed="onStartStopClick"></TimeTrackerStartStop>
+                            <TimeEntryMoreOptionsDropdown
+                                @edit="handleEdit"
+                                @duplicate="duplicateTimeEntry"
+                                @delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
+                        </div>
+                    </div>
+                </div>
             </div>
         </MainContainer>
     </div>

resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue

@@ -36,8 +36,8 @@ function selectUnselectAll(value: boolean) {
         class="bg-background dark:bg-secondary border-b border-border-primary py-1 text-xs @sm:text-sm">
         <MainContainer>
             <div class="flex group justify-between items-center">
-                <div class="flex items-center space-x-2">
+                <div class="flex items-center @lg:space-x-2 pl-1.5 @lg:pl-0">
-                    <div class="w-5">
+                    <div class="w-5 hidden @lg:block">
                         <CalendarIcon
                             class="w-3 @sm:w-4 text-icon-default group-hover:hidden block">
                         </CalendarIcon>
@@ -50,11 +50,11 @@ function selectUnselectAll(value: boolean) {
                     <span class="font-medium text-text-secondary">
                         {{ formatWeekday(date) }}
                     </span>
-                    <span class="text-text-tertiary">
+                    <span class="text-text-tertiary ml-2">
                         {{ formatDate(date, organization?.date_format) }}
                     </span>
                 </div>
-                <div class="text-text-secondary pr-[87px] @lg:pr-[92px]">
+                <div class="text-text-secondary pr-2 @lg:pr-[92px]">
                     <span class="font-medium">
                         {{
                             formatHumanReadableDuration(

resources/js/packages/ui/src/TimeEntry/TimeEntryRowTagDropdown.vue

@@ -4,10 +4,16 @@ import { computed } from 'vue';
 import TagBadge from '@/packages/ui/src/Tag/TagBadge.vue';
 import type { Tag } from '@/packages/api/src';
 
-const props = defineProps<{
+const props = withDefaults(
-    tags: Tag[];
+    defineProps<{
-    createTag: (name: string) => Promise<Tag | undefined>;
+        tags: Tag[];
-}>();
+        createTag: (name: string) => Promise<Tag | undefined>;
+        compact?: boolean;
+    }>(),
+    {
+        compact: false,
+    }
+);
 
 const emit = defineEmits<{
     changed: [model: string[]];
@@ -20,23 +26,41 @@ const model = defineModel<string[]>({
 const timeEntryTags = computed<Tag[]>(() => {
     return props.tags.filter((tag) => model.value.includes(tag.id));
 });
+
+const displayName = computed(() => {
+    if (props.compact && timeEntryTags.value.length > 0) {
+        const count = timeEntryTags.value.length;
+        return count === 1 ? '1 tag' : `${count} tags`;
+    }
+    if (timeEntryTags.value.length >= 3) {
+        const firstTag = timeEntryTags.value[0]?.name || '';
+        const remaining = timeEntryTags.value.length - 1;
+        return `${firstTag} + ${remaining} more`;
+    }
+    return timeEntryTags.value.map((tag: Tag) => tag.name).join(', ');
+});
 </script>
 <template>
     <TagDropdown
         v-model="model"
         :tags="tags"
         align="end"
+        :show-no-tag-option="false"
         :create-tag
         @changed="emit('changed', model)">
         <template #trigger>
             <button
                 data-testid="time_entry_tag_dropdown"
-                class="opacity-50 group-hover:opacity-100 group/dropdown focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center">
+                :class="[
+                    'group/dropdown focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center',
+                    compact ? '' : 'opacity-50 group-hover:opacity-100',
+                ]">
                 <TagBadge
                     :border="false"
                     size="large"
-                    class="border-0 sm:px-1.5 text-icon-default group-focus-within/dropdown:text-text-primary"
+                    :show-icon="!(compact && timeEntryTags.length > 0)"
-                    :name="timeEntryTags.map((tag: Tag) => tag.name).join(', ')"></TagBadge>
+                    class="border-0 sm:px-1.5 text-icon-default group-focus-within/dropdown:text-text-primary whitespace-nowrap"
+                    :name="displayName"></TagBadge>
             </button>
         </template>
     </TagDropdown>

resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue

@@ -222,7 +222,7 @@ useSelectEvents(
                 <div
                     v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
                     ref="floating"
-                    class="z-50 w-[min(500px,100vw-2rem)]"
+                    class="z-50 w-[min(640px,100vw-2rem)]"
                     :style="floatingStyles">
                     <div
                         class="rounded-lg w-full border border-card-border overflow-hidden shadow-dropdown bg-card-background">

resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue

@@ -515,14 +515,14 @@ const showCreateProject = ref(false);
                         props.class
                     )
                 ">
-                <div class="flex items-center lg:space-x-1 min-w-0">
+                <div class="flex items-center lg:space-x-1 min-w-0 overflow-hidden">
-                    <span class="whitespace-nowrap text-xs lg:text-sm">
+                    <span class="text-xs lg:text-sm shrink-0">
                         {{ selectedProjectName }}
                     </span>
                     <ChevronRightIcon
                         v-if="currentTask"
                         class="w-4 lg:w-5 text-text-secondary shrink-0"></ChevronRightIcon>
-                    <div v-if="currentTask" class="min-w-0 shrink text-xs lg:text-sm truncate">
+                    <div v-if="currentTask" class="min-w-0 text-xs lg:text-sm truncate shrink">
                         {{ currentTask.name }}
                     </div>
                 </div>

resources/js/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue

@@ -42,15 +42,15 @@ const task = computed(() => {
             ref="projectDropdownTrigger"
             :color="project?.color"
             :name="project?.name"
-            class="shrink-0">
+            class="shrink min-w-0 max-w-[50%]">
             <div v-if="project" class="flex items-center lg:space-x-1 min-w-0">
-                <span class="whitespace-nowrap text-xs">
+                <span class="text-xs whitespace-nowrap shrink-0">
                     {{ project?.name }}
                 </span>
                 <ChevronRightIcon
                     v-if="task"
                     class="w-4 lg:w-5 text-text-secondary shrink-0"></ChevronRightIcon>
-                <div v-if="task" class="min-w-0 shrink text-xs truncate">
+                <div v-if="task" class="min-w-0 text-xs truncate">
                     {{ task.name }}
                 </div>
             </div>