From a8904bfc483a70db3dc5983fbf3de20552dc6d93 Mon Sep 17 00:00:00 2001
From: sabith-tu <95301637+sabith-tu@users.noreply.github.com>
Date: Tue, 14 Nov 2023 18:26:50 +0530
Subject: [PATCH] style: ui fixes for pages and views (#2770)

---
 .../filters/header/filters/assignee.tsx            |  2 +-
 .../filters/header/filters/created-by.tsx          |  2 +-
 .../filters/header/filters/mentions.tsx            |  2 +-
 web/components/pages/single-page-detailed-item.tsx | 14 +++++++++-----
 web/components/pages/single-page-list-item.tsx     |  6 +++---
 web/components/views/view-list-item.tsx            |  6 +++---
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
index 7c92b0ed9..594444029 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -49,7 +49,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
                     key={`assignees-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
+                    icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
                     title={member.display_name}
                   />
                 ))}
diff --git a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
index 90873cb7b..19f0f139f 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -49,7 +49,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
                     key={`created-by-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />}
+                    icon={<Avatar name={member.display_name} src={member.avatar} size="md" />}
                     title={member.display_name}
                   />
                 ))}
diff --git a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
index 5d7a63097..16f05d90d 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -49,7 +49,7 @@ export const FilterMentions: React.FC<Props> = (props) => {
                     key={`mentions-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />}
+                    icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} size={"md"} />}
                     title={member.display_name}
                   />
                 ))}
diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx
index 2ff00f2d5..d1cade380 100644
--- a/web/components/pages/single-page-detailed-item.tsx
+++ b/web/components/pages/single-page-detailed-item.tsx
@@ -58,8 +58,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a className="block p-4">
           <div className="flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              <p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p>
+            <div className="flex items-center overflow-hidden gap-2">
+              <p className="mr-2 truncate text-sm">{page.name}</p>
               {page.label_details.length > 0 &&
                 page.label_details.map((label) => (
                   <div
@@ -188,9 +188,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               </CustomMenu>
             </div>
           </div>
-          <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
-            {page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) : null}
-          </div>
+          {page.blocks.length > 0 && (
+            <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
+              {page.blocks.slice(0, 3).map((block) => (
+                <h4 className="truncate">{block.name}</h4>
+              ))}
+            </div>
+          )}
         </a>
       </Link>
     </div>
diff --git a/web/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx
index 87d5bdab2..6f39f3e26 100644
--- a/web/components/pages/single-page-list-item.tsx
+++ b/web/components/pages/single-page-list-item.tsx
@@ -59,9 +59,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
         <a>
           <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
-              <div className="flex flex-wrap items-center gap-2">
-                <FileText className="h-4 w-4" />
-                <p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p>
+              <div className="flex overflow-hidden items-center gap-2">
+                <FileText className="h-4 w-4 shrink-0" />
+                <p className="mr-2 truncate text-sm text-custom-text-100">{page.name}</p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div
diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index 41e3a7ae8..7c35718b1 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -60,12 +60,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
         <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
           <a className="flex items-center justify-between relative rounded p-4 w-full">
             <div className="flex items-center justify-between w-full">
-              <div className="flex items-center gap-4">
+              <div className="flex items-center gap-4 overflow-hidden">
                 <div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
                   <PhotoFilterIcon className="h-3.5 w-3.5" />
                 </div>
-                <div className="flex flex-col">
-                  <p className="text-sm leading-4 font-medium break-all">{truncateText(view.name, 75)}</p>
+                <div className="flex flex-col overflow-hidden ">
+                  <p className="text-sm leading-4 font-medium truncate  break-all">{view.name}</p>
                   {view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>}
                 </div>
               </div>