From e0e8ce633b5b1c8ec1840a541fd033940bb6b44b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 23 Apr 2024 12:53:52 +0530
Subject: [PATCH] [WEB-1027] fix: overflow & alignment fixes (#4234)

* fix: list layout issue title overflow

* fix: project feature toggle modal project name overflow

* fix: app sidebar project section alignment

* fix: issue title textarea

* fix: create issue modal project select overflow

* fix: module and cycle applied filters overflow fix
---
 packages/ui/src/form-fields/textarea.tsx           | 14 +-------------
 web/components/dropdowns/project.tsx               |  2 +-
 .../filters/applied-filters/cycle.tsx              |  4 ++--
 .../filters/applied-filters/filters-list.tsx       |  4 ++--
 .../filters/applied-filters/module.tsx             |  4 ++--
 web/components/issues/issue-layouts/list/block.tsx | 12 ++++++------
 web/components/project/project-feature-update.tsx  |  4 ++--
 web/components/project/sidebar-list-item.tsx       |  2 +-
 8 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index de225d68f..2c47a65f5 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -11,17 +11,7 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
 }
 
 const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
-  const {
-    id,
-    name,
-    value = "",
-    rows = 1,
-    cols = 1,
-    mode = "primary",
-    hasError = false,
-    className = "",
-    ...rest
-  } = props;
+  const { id, name, value = "", mode = "primary", hasError = false, className = "", ...rest } = props;
   // refs
   const textAreaRef = useRef<any>(ref);
   // auto re-size
@@ -33,8 +23,6 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
       name={name}
       ref={textAreaRef}
       value={value}
-      rows={rows}
-      cols={cols}
       className={cn(
         "no-scrollbar w-full bg-transparent px-3 py-2 placeholder-custom-text-400 outline-none",
         {
diff --git a/web/components/dropdowns/project.tsx b/web/components/dropdowns/project.tsx
index 95ed8cd62..e281db07b 100644
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@@ -176,7 +176,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                 </span>
               )}
               {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                <span className="flex-grow truncate">{selectedProject?.name ?? placeholder}</span>
+                <span className="flex-grow truncate max-w-40">{selectedProject?.name ?? placeholder}</span>
               )}
               {dropdownArrow && (
                 <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
index 4f139727f..592a12123 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -28,9 +28,9 @@ export const AppliedCycleFilters: React.FC<Props> = observer((props) => {
         const cycleStatus = (cycleDetails?.status ? cycleDetails?.status.toLocaleLowerCase() : "draft") as TCycleGroups;
 
         return (
-          <div key={cycleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={cycleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
             <CycleGroupIcon cycleGroup={cycleStatus} className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case">{cycleDetails.name}</span>
+            <span className="normal-case truncate">{cycleDetails.name}</span>
             {editable && (
               <button
                 type="button"
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
index 279b57c94..85b3010bc 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -60,9 +60,9 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         return (
           <div
             key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize w-full"
           >
-            <div className="flex flex-wrap items-center gap-1.5">
+            <div className="flex flex-wrap items-center gap-1.5 w-full">
               <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
index 1105f5306..b3addc029 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -24,9 +24,9 @@ export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
         if (!moduleDetails) return null;
 
         return (
-          <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
             <DiceIcon className="h-3 w-3 flex-shrink-0" />
-            <span className="normal-case">{moduleDetails.name}</span>
+            <span className="normal-case truncate">{moduleDetails.name}</span>
             {editable && (
               <button
                 type="button"
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index de409abec..d1fe3ffd7 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -54,8 +54,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
         }
       )}
     >
-      <div className="flex w-full">
-        <div className="flex flex-grow items-center gap-3">
+      <div className="flex w-full truncate">
+        <div className="flex flex-grow items-center gap-3 truncate">
           {displayProperties && displayProperties?.key && (
             <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
               {projectIdentifier}-{issue.sequence_id}
@@ -68,7 +68,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
 
           {issue?.is_draft ? (
             <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-              <span>{issue.name}</span>
+              <p className="truncate">{issue.name}</p>
             </Tooltip>
           ) : (
             <ControlLink
@@ -78,11 +78,11 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
               }`}
               target="_blank"
               onClick={() => handleIssuePeekOverview(issue)}
-              className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+              className="w-full truncate cursor-pointer text-sm text-custom-text-100"
               disabled={!!issue?.tempId}
             >
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span>{issue.name}</span>
+                <p className="truncate">{issue.name}</p>
               </Tooltip>
             </ControlLink>
           )}
@@ -91,7 +91,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           <div className="block md:hidden border border-custom-border-300 rounded ">{quickActions(issue)}</div>
         )}
       </div>
-      <div className="ml-0 md:ml-auto flex flex-wrap  md:flex-shrink-0 items-center gap-2">
+      <div className="flex flex-shrink-0 items-center gap-2">
         {!issue?.tempId ? (
           <>
             <IssueProperties
diff --git a/web/components/project/project-feature-update.tsx b/web/components/project/project-feature-update.tsx
index 7bf6a8999..2359b6609 100644
--- a/web/components/project/project-feature-update.tsx
+++ b/web/components/project/project-feature-update.tsx
@@ -35,8 +35,8 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
       <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
       <div className="flex items-center justify-between gap-2 mt-4 px-4 pt-4 pb-2 border-t border-custom-border-100">
         <div className="text-sm text-custom-text-300 font-medium">
-          Congrats! Project <ProjectLogo logo={currentProjectDetails.logo_props} /> {currentProjectDetails.name}{" "}
-          created.
+          Congrats! Project <ProjectLogo logo={currentProjectDetails.logo_props} />{" "}
+          <p className="break-all">{currentProjectDetails.name}</p> created.
         </div>
         <div className="flex gap-2">
           <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={1}>
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index bc6166fbb..f79036a3a 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -225,7 +225,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       "justify-center": isCollapsed,
                     })}
                   >
-                    <div className="h-7 w-7 grid place-items-center">
+                    <div className="h-7 w-7 grid place-items-center flex-shrink-0">
                       <ProjectLogo logo={project.logo_props} />
                     </div>
                     {!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}