From 469f1286044b961c20bd711e03e52c1c37d96384 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sun, 29 Sep 2024 00:10:44 +0200
Subject: [PATCH] fix project name column overflow on some screen sizes with
 long project names

---
 resources/js/Components/Common/Project/ProjectTable.vue    | 5 ++++-
 resources/js/Components/Common/Project/ProjectTableRow.vue | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/Common/Project/ProjectTable.vue b/resources/js/Components/Common/Project/ProjectTable.vue
index c7766e1a..947a6404 100644
--- a/resources/js/Components/Common/Project/ProjectTable.vue
+++ b/resources/js/Components/Common/Project/ProjectTable.vue
@@ -51,7 +51,10 @@ const { clients } = storeToRefs(useClientsStore());
                 class="grid min-w-full"
                 style="
                     grid-template-columns:
-                        1fr minmax(150px, auto) minmax(140px, auto)
+                        minmax(300px, 1fr) minmax(150px, auto) minmax(
+                            140px,
+                            auto
+                        )
                         minmax(130px, auto) minmax(130px, auto) minmax(
                             120px,
                             auto
diff --git a/resources/js/Components/Common/Project/ProjectTableRow.vue b/resources/js/Components/Common/Project/ProjectTableRow.vue
index 28cd4a20..d4f4ef0e 100644
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/resources/js/Components/Common/Project/ProjectTableRow.vue
@@ -68,14 +68,14 @@ const showEditProjectModal = ref(false);
         :original-project="project"></ProjectEditModal>
     <TableRow :href="route('projects.show', { project: project.id })">
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap min-w-0 flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <div
                 :style="{
                     backgroundColor: project.color,
                     boxShadow: `var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) ${project.color}30`,
                 }"
                 class="w-3 h-3 rounded-full"></div>
-            <span>
+            <span class="overflow-ellipsis overflow-hidden">
                 {{ project.name }}
             </span>
             <span class="text-muted"> {{ projectTasksCount }} Tasks </span>