fix container queries for time entry rows

Author: Onatcer

resources/js/Pages/ReportingDetailed.vue

@@ -383,7 +383,7 @@ async function downloadExport(format: ExportFormat) {
             @submit="clearSelectionAndState"
             @select-all="selectedTimeEntries = [...timeEntries]"
             @unselect-all="selectedTimeEntries = []"></TimeEntryMassActionRow>
-        <div class="w-full relative">
+        <div class="w-full relative @container">
             <div v-for="entry in timeEntries" :key="entry.id">
                 <TimeEntryRow
                     :selected="selectedTimeEntries.includes(entry)"

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

@@ -93,7 +93,7 @@ function onSelectChange(checked: boolean) {
         class="border-b border-default-background-separator bg-row-background min-w-0 transition"
         data-testid="time_entry_row">
         <MainContainer class="min-w-0">
-            <div class="@sm:flex py-2 items-center min-w-0 justify-between group">
+            <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">
                     <Checkbox
                         :checked="

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed } from 'vue';
 import type {
     CreateClientBody,
     CreateProjectBody,
@@ -38,8 +38,6 @@ const props = defineProps<{
     canCreateProject: boolean;
 }>();
 
-const maxVisibleGroups = ref(7); // Start with 10 day groups, then show all
-
 const groupedTimeEntries = computed(() => {
     const groupedEntriesByDay: Record<string, TimeEntry[]> = {};
     for (const entry of props.timeEntries) {
@@ -137,43 +135,11 @@ function unselectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
         );
     });
 }
-
-const visibleGroupedEntries = computed(() => {
-    const allGroups = Object.entries(groupedTimeEntries.value);
-    return Object.fromEntries(allGroups.slice(0, maxVisibleGroups.value));
-});
-
-const totalGroups = computed(() => Object.keys(groupedTimeEntries.value).length);
-
-function startProgressiveLoading() {
-    const loadMoreGroups = () => {
-        if (maxVisibleGroups.value < totalGroups.value) {
-            maxVisibleGroups.value = Math.min(maxVisibleGroups.value + 5, totalGroups.value);
-
-            if (maxVisibleGroups.value < totalGroups.value) {
-                requestIdleCallback(loadMoreGroups);
-            }
-        }
-    };
-
-    requestIdleCallback(loadMoreGroups);
-}
-
-// Watch for changes to totalGroups and adjust maxVisibleGroups accordingly
-watch(totalGroups, (newTotal, oldTotal) => {
-    if (newTotal !== oldTotal) {
-        maxVisibleGroups.value = newTotal;
-    }
-});
-
-onMounted(() => {
-    startProgressiveLoading();
-});
 </script>
 
 <template>
     <div class="@container">
-        <div v-for="(value, key) in visibleGroupedEntries" :key="key">
+        <div v-for="(value, key) in groupedTimeEntries" :key="key">
             <TimeEntryRowHeading
                 :date="String(key)"
                 :duration="sumDuration(value)"

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

@@ -112,7 +112,7 @@ async function handleDeleteTimeEntry() {
         class="border-b border-default-background-separator transition min-w-0 bg-row-background"
         data-testid="time_entry_row">
         <MainContainer class="min-w-0">
-            <div class="@sm:flex py-2 min-w-0 items-center justify-between group">
+            <div class="@xl:flex py-2 min-w-0 items-center justify-between group">
                 <div class="flex items-center min-w-0">
                     <Checkbox :checked="selected" @update:checked="onSelectChange" />
                     <div v-if="indent === true" class="w-10 h-7"></div>