From 3d224f8cff96d02e5eb3f9452b69e44ac775edf0 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 26 Sep 2025 14:59:38 +0700
Subject: [PATCH] chore: update project page title too long

---
 web-app/src/routes/project/index.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/web-app/src/routes/project/index.tsx b/web-app/src/routes/project/index.tsx
index fa8e1cf3a1..5ab24bb396 100644
--- a/web-app/src/routes/project/index.tsx
+++ b/web-app/src/routes/project/index.tsx
@@ -134,25 +134,22 @@ function ProjectContent() {
                       className="bg-main-view-fg/3 py-2 px-4 rounded-lg"
                       key={folder.id}
                     >
-                      <div className="flex items-center gap-4">
-                        <div className="flex items-start gap-3 flex-1">
+                      <div className="flex items-center gap-4 min-w-0">
+                        <div className="flex items-start gap-3 flex-1 min-w-0">
                           <div className="shrink-0 w-8 h-8 relative flex items-center justify-center bg-main-view-fg/4 rounded-md">
                             <IconFolder
                               size={16}
                               className="text-main-view-fg/50"
                             />
                           </div>
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2">
-                              <h3 className="text-base font-medium text-main-view-fg/80 line-clamp-1">
+                          <div className="flex-1 min-w-0 overflow-hidden">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <h3
+                                className="text-base font-medium text-main-view-fg/80 truncate flex-1 min-w-0"
+                                title={folder.name}
+                              >
                                 {folder.name}
                               </h3>
-                              <span className="text-xs bg-main-view-fg/10 text-main-view-fg/60 px-2 py-0.5 rounded-full">
-                                {projectThreads.length}{' '}
-                                {projectThreads.length === 1
-                                  ? t('projects.thread')
-                                  : t('projects.threads')}
-                              </span>
                             </div>
                             <p className="text-main-view-fg/50 text-xs line-clamp-2 mt-0.5">
                               {t('projects.updated')}{' '}
@@ -161,6 +158,12 @@ function ProjectContent() {
                           </div>
                         </div>
                         <div className="flex items-center">
+                          <span className="text-xs mr-4 bg-main-view-fg/10 text-main-view-fg/60 px-2 py-0.5 rounded-full shrink-0 whitespace-nowrap">
+                            {projectThreads.length}{' '}
+                            {projectThreads.length === 1
+                              ? t('projects.thread')
+                              : t('projects.threads')}
+                          </span>
                           {projectThreads.length > 0 && (
                             <button
                               className="size-8 cursor-pointer flex items-center justify-center rounded-md hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out mr-1"