From 3b41d90b07dd35ffb66558981e589b16312da707 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sat, 7 Sep 2024 00:47:28 +0200
Subject: [PATCH] fix layout bug in time view with small time entries, fixes
 ST-414

---
 .../js/Components/Billing/BillingBanner.vue   | 17 +++++----
 resources/js/Layouts/AppLayout.vue            | 19 +++++-----
 resources/js/Pages/Time.vue                   |  6 ++--
 .../src/TimeEntry/TimeEntryAggregateRow.vue   | 36 ++++++++++---------
 .../TimeEntry/TimeEntryDescriptionInput.vue   |  9 ++---
 .../ui/src/TimeEntry/TimeEntryRow.vue         |  7 ++--
 .../src/TimeTracker/TimeTrackerControls.vue   |  2 +-
 7 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/resources/js/Components/Billing/BillingBanner.vue b/resources/js/Components/Billing/BillingBanner.vue
index 6b74ab0d..6d9e686c 100644
--- a/resources/js/Components/Billing/BillingBanner.vue
+++ b/resources/js/Components/Billing/BillingBanner.vue
@@ -101,13 +101,16 @@ 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>
-                <span class="font-medium">
-                    Your are currently using the Free Plan.
-                </span>
-                <span
-                    >To unlock all premium features & support the development of
-                    solidtime, please upgrade your plan.</span
-                >
+                <div class="flex items-center flex-col md:flex-row">
+                    <span class="font-medium">
+                        You are currently using the Free Plan.
+                    </span>
+                    <span
+                        >To unlock all premium features & support the
+                        development of solidtime, please upgrade your
+                        plan.</span
+                    >
+                </div>
             </div>
             <div class="flex items-center space-x-2">
                 <Link
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 5ef8775f..1d6361af 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/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"
-            style="
-                scrollbar-width: thin;
-                scrollbar-color: var(--color-bg-primary) transparent;
-            ">
+            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">
             <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>
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index 9bcd2e5a..65188aac 100644
--- a/resources/js/Pages/Time.vue
+++ b/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"
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
index 699cfb5e..5b61ef16 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
@@ -73,39 +73,41 @@ 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>
-            <div class="sm:flex py-1.5 items-center justify-between group">
+        <MainContainer class="min-w-0">
+            <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>
+                        <TimeTrackerProjectTaskDropdown
+                            :clients
+                            :createProject
+                            :createClient
+                            :projects="projects"
+                            :tasks="tasks"
+                            :showBadgeBorder="false"
+                            @changed="updateProjectAndTask"
+                            :project="timeEntry.project_id"
+                            :currency="currency"
+                            :task="
+                                timeEntry.task_id
+                            "></TimeTrackerProjectTaskDropdown>
                     </div>
-                    <TimeTrackerProjectTaskDropdown
-                        :clients
-                        :createProject
-                        :createClient
-                        :projects="projects"
-                        :tasks="tasks"
-                        :showBadgeBorder="false"
-                        @changed="updateProjectAndTask"
-                        :project="timeEntry.project_id"
-                        :currency="currency"
-                        :task="
-                            timeEntry.task_id
-                        "></TimeTrackerProjectTaskDropdown>
                 </div>
                 <div class="flex items-center font-medium lg:space-x-2">
                     <TimeEntryRowTagDropdown
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
index 3d8f0feb..0c526516 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryDescriptionInput.vue
@@ -24,11 +24,12 @@ const displaysPlaceholder = computed(() => {
 </script>
 
 <template>
-    <div>
-        <div class="relative text-sm font-medium">
+    <div
+        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>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
index 500678a6..feac8eaf 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue
+++ b/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
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
index 176cc824..07f27e6f 100644
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
+++ b/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?"