fix layout bug in time view with small time entries, fixes ST-414

resources/js/Components/Billing/BillingBanner.vue

@@ -101,14 +101,17 @@ const showFreeUpgradeBanner = computed(
         <MainContainer class="flex items-center justify-between">
             <div class="flex items-center space-x-1.5">
                 <XCircleIcon class="w-4 text-white/50"></XCircleIcon>
+                <div class="flex items-center flex-col md:flex-row">
                     <span class="font-medium">
-                    Your are currently using the Free Plan.
+                        You are currently using the Free Plan.
                     </span>
                     <span
-                    >To unlock all premium features & support the development of
+                        >To unlock all premium features & support the
-                    solidtime, please upgrade your plan.</span
+                        development of solidtime, please upgrade your
+                        plan.</span
                     >
                 </div>
+            </div>
             <div class="flex items-center space-x-2">
                 <Link
                     v-if="isBillingActivated() && canManageBilling()"

resources/js/Layouts/AppLayout.vue

@@ -79,23 +79,24 @@ const page = usePage<{
                 '!flex bg-default-background w-full z-[9999999999]':
                     showSidebarMenu,
             }"
-            class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-4 py-4 sm:flex flex-col justify-between overflow-y-scroll"
+            class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-4 py-4 lg:flex flex-col justify-between">
-            style="
-                scrollbar-width: thin;
-                scrollbar-color: var(--color-bg-primary) transparent;
-            ">
             <div>
                 <div
                     class="border-b border-default-background-separator pb-2 flex justify-between">
                     <OrganizationSwitcher class="w-full"></OrganizationSwitcher>
                     <XMarkIcon
                         @click="showSidebarMenu = false"
-                        class="w-8 sm:hidden"></XMarkIcon>
+                        class="w-8 lg:hidden"></XMarkIcon>
                 </div>
                 <div class="border-b border-default-background-separator">
                     <CurrentSidebarTimer></CurrentSidebarTimer>
                 </div>
-                <nav class="pt-2">
+                <nav
+                    class="pt-2 overflow-y-scroll"
+                    style="
+                        scrollbar-width: thin;
+                        scrollbar-color: var(--color-bg-primary) transparent;
+                    ">
                     <ul>
                         <NavigationSidebarItem
                             title="Dashboard"
@@ -205,9 +206,9 @@ const page = usePage<{
                 </ul>
             </div>
         </div>
-        <div class="flex-1 sm:ml-[230px] 2xl:ml-[250px]">
+        <div class="flex-1 lg:ml-[230px] 2xl:ml-[250px] min-w-0">
             <div
-                class="sm:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-muted flex justify-between items-center">
+                class="lg:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-muted flex justify-between items-center">
                 <Bars3Icon
                     @click="showSidebarMenu = !showSidebarMenu"
                     class="w-7 text-muted"></Bars3Icon>

resources/js/Pages/Time.vue

@@ -106,13 +106,13 @@ async function createClient(
         v-model:show="showManualTimeEntryModal"></TimeEntryCreateModal>
     <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
-            class="pt-5 sm:pt-8 pb-4 sm:pb-6 border-b border-default-background-separator">
+            class="pt-5 lg:pt-8 pb-4 lg:pb-6 border-b border-default-background-separator">
             <div
-                class="sm:flex items-end sm:divide-x divide-default-background-separator divide-y sm:divide-y-0 space-y-2 sm:space-y-0 sm:space-x-2">
+                class="lg:flex items-end lg:divide-x divide-default-background-separator divide-y lg:divide-y-0 space-y-2 lg:space-y-0 lg:space-x-2">
                 <div class="flex-1">
                     <TimeTracker></TimeTracker>
                 </div>
-                <div class="pb-2 pt-2 sm:pt-0 sm:pl-4 flex justify-center">
+                <div class="pb-2 pt-2 lg:pt-0 lg:pl-4 flex justify-center">
                     <SecondaryButton
                         class="w-full text-center flex justify-center"
                         @click="showManualTimeEntryModal = true"

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

@@ -73,26 +73,27 @@ const expanded = ref(false);
 
 <template>
     <div
-        class="border-b border-default-background-separator transition"
+        class="border-b border-default-background-separator min-w-0 transition"
         data-testid="time_entry_row">
-        <MainContainer>
+        <MainContainer class="min-w-0">
-            <div class="sm:flex py-1.5 items-center justify-between group">
+            <div
+                class="sm:flex py-1.5 items-center min-w-0 justify-between group">
                 <div class="flex space-x-3 items-center min-w-0">
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
-                    <div class="flex items-center">
+                    <div class="flex items-center min-w-0">
                         <GroupedItemsCountButton
                             :expanded="expanded"
                             @click="expanded = !expanded">
                             {{ timeEntry?.timeEntries?.length }}
                         </GroupedItemsCountButton>
                         <TimeEntryDescriptionInput
+                            class="min-w-0"
                             @changed="updateTimeEntryDescription"
                             :modelValue="
                                 timeEntry.description
                             "></TimeEntryDescriptionInput>
-                    </div>
                         <TimeTrackerProjectTaskDropdown
                             :clients
                             :createProject
@@ -107,6 +108,7 @@ const expanded = ref(false);
                                 timeEntry.task_id
                             "></TimeTrackerProjectTaskDropdown>
                     </div>
+                </div>
                 <div class="flex items-center font-medium lg:space-x-2">
                     <TimeEntryRowTagDropdown
                         :createTag

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

@@ -24,11 +24,12 @@ const displaysPlaceholder = computed(() => {
 </script>
 
 <template>
-    <div>
+    <div
-        <div class="relative text-sm font-medium">
+        class="relative min-w-0 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">
+        <div class="relative text-sm font-medium min-w-0">
             <div
                 :class="[
-                    'opacity-0 py-2 text-base whitespace-pre pl-3 pr-1',
+                    'opacity-0 py-2 text-base whitespace-pre min-w-0 pl-3 pr-1',
                     { 'min-w-[150px]': displaysPlaceholder },
                 ]">
                 {{ liveDataValue }}
@@ -40,7 +41,7 @@ const displaysPlaceholder = computed(() => {
                 @input="onInput"
                 @keydown.enter="onChange"
                 placeholder="Add a description"
-                class="absolute px-0 h-full pl-3 pr-1 left-0 top-0 w-full text-sm lg:text-base text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
+                class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm lg:text-base text-white font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0" />
         </div>
     </div>
 </template>

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

@@ -61,18 +61,17 @@ function updateProjectAndTask(projectId: string, taskId: string) {
 
 <template>
     <div
-        class="border-b border-default-background-separator transition"
+        class="border-b border-default-background-separator transition min-w-0"
         data-testid="time_entry_row">
-        <MainContainer>
+        <MainContainer class="min-w-0">
             <div
-                class="sm:flex py-1 lg:py-1.5 items-center justify-between group">
+                class="sm:flex py-1 lg:py-1.5 min-w-0 items-center justify-between group">
                 <div class="flex space-x-1 items-center min-w-0">
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
                     <div class="w-7 h-7" v-if="indent === true"></div>
                     <TimeEntryDescriptionInput
-                        class="flex-1 max-w-[220px] md:max-w-[400px] text-ellipsis overflow-ellipsis"
                         @changed="updateTimeEntryDescription"
                         :modelValue="
                             timeEntry.description

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

@@ -92,7 +92,7 @@ function updateTimeEntryDescription() {
         class="flex items-center relative @container"
         data-testid="dashboard_timer">
         <div
-            class="flex flex-col sm:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
+            class="flex flex-col lg:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
             <div class="flex flex-1 items-center pr-6">
                 <input
                     placeholder="What are you working on?"