thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: words breaking abruptly (#1371)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-06-23 19:30:11 +05:30 committed by GitHub
parent ca799a2b02
commit 428d0dbac9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/components/analytics/custom-analytics/sidebar.tsx
View File

@ -237,7 +237,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{project?.name.charAt(0)} {project?.name.charAt(0)}
</span> </span>
)} )}
<h5 className="break-all"> <h5 className="break-words">
{project.name} {project.name}
<span className="text-brand-secondary text-xs ml-1"> <span className="text-brand-secondary text-xs ml-1">
({project.identifier}) ({project.identifier})
@ -276,7 +276,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{projectId ? ( {projectId ? (
cycleId && cycleDetails ? ( cycleId && cycleDetails ? (
<div className="hidden md:block h-full overflow-y-auto"> <div className="hidden md:block h-full overflow-y-auto">
<h4 className="font-medium break-all">Analytics for {cycleDetails.name}</h4> <h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
<div className="space-y-4 mt-4"> <div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6> <h6 className="text-brand-secondary">Lead</h6>
@ -304,7 +304,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
</div> </div>
) : moduleId && moduleDetails ? ( ) : moduleId && moduleDetails ? (
<div className="hidden md:block h-full overflow-y-auto"> <div className="hidden md:block h-full overflow-y-auto">
<h4 className="font-medium break-all">Analytics for {moduleDetails.name}</h4> <h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
<div className="space-y-4 mt-4"> <div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6> <h6 className="text-brand-secondary">Lead</h6>
@ -352,7 +352,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{projectDetails?.name.charAt(0)} {projectDetails?.name.charAt(0)}
</span> </span>
)} )}
<h4 className="font-medium break-all">{projectDetails?.name}</h4> <h4 className="font-medium break-words">{projectDetails?.name}</h4>
</div> </div>
<div className="space-y-4 mt-4"> <div className="space-y-4 mt-4">
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">

2
apps/app/components/analytics/project-modal.tsx
View File

@ -160,7 +160,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
}`} }`}
> >
<div className="flex items-center justify-between gap-4 bg-brand-base px-5 py-4 text-sm"> <div className="flex items-center justify-between gap-4 bg-brand-base px-5 py-4 text-sm">
<h3 className="break-all"> <h3 className="break-words">
Analytics for{" "} Analytics for{" "}
{cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name} {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
</h3> </h3>

2
apps/app/components/analytics/scope-and-demand/leaderboard.tsx
View File

@ -33,7 +33,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
{user.firstName !== "" ? user.firstName[0] : "?"} {user.firstName !== "" ? user.firstName[0] : "?"}
</div> </div>
)} )}
<span className="break-all text-brand-secondary"> <span className="break-words text-brand-secondary">
{user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"} {user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
</span> </span>
</div> </div>

2
apps/app/components/breadcrumbs/index.tsx
View File

@ -52,7 +52,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
<div className="max-w-64 px-3 text-sm"> <div className="max-w-64 px-3 text-sm">
<p className={`${icon ? "flex items-center gap-2" : ""}`}> <p className={`${icon ? "flex items-center gap-2" : ""}`}>
{icon} {icon}
<span className="break-all">{title}</span> <span className="break-words">{title}</span>
</p> </p>
</div> </div>
)} )}

4
apps/app/components/core/board-view/single-issue.tsx
View File

@ -338,8 +338,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
{issue.project_detail.identifier}-{issue.sequence_id} {issue.project_detail.identifier}-{issue.sequence_id}
</div> </div>
)} )}
<h5 className="text-sm group-hover:text-brand-accent"> <h5 className="text-sm group-hover:text-brand-accent break-words line-clamp-3">
{truncateText(issue.name, 120)} {issue.name}
</h5> </h5>
</a> </a>
</Link> </Link>

2
apps/app/components/core/sidebar/links-list.tsx
View File

@ -53,7 +53,7 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, userAuth }
<LinkIcon className="h-3.5 w-3.5" /> <LinkIcon className="h-3.5 w-3.5" />
</div> </div>
<div> <div>
<h5 className="w-4/5 break-all">{link.title}</h5> <h5 className="w-4/5 break-words">{link.title}</h5>
<p className="mt-0.5 text-brand-secondary"> <p className="mt-0.5 text-brand-secondary">
Added {timeAgo(link.created_at)} Added {timeAgo(link.created_at)}
<br /> <br />

2
apps/app/components/cycles/active-cycle-details.tsx
View File

@ -226,7 +226,7 @@ export const ActiveCycleDetails: React.FC = () => {
/> />
</span> </span>
<Tooltip tooltipContent={cycle.name} position="top-left"> <Tooltip tooltipContent={cycle.name} position="top-left">
<h3 className="break-all text-lg font-semibold"> <h3 className="break-words text-lg font-semibold">
{truncateText(cycle.name, 70)} {truncateText(cycle.name, 70)}
</h3> </h3>
</Tooltip> </Tooltip>

2
apps/app/components/cycles/delete-cycle-modal.tsx
View File

@ -143,7 +143,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete cycle-{" "} Are you sure you want to delete cycle-{" "}
<span className="break-all font-medium text-brand-base"> <span className="break-words font-medium text-brand-base">
{data?.name} {data?.name}
</span> </span>
? All of the data related to the cycle will be permanently removed. This ? All of the data related to the cycle will be permanently removed. This

4
apps/app/components/cycles/single-cycle-card.tsx
View File

@ -150,8 +150,8 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
}`} }`}
/> />
</span> </span>
<Tooltip tooltipContent={cycle.name} className="break-all" position="top-left"> <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
<h3 className="break-all text-lg font-semibold"> <h3 className="break-words text-lg font-semibold">
{truncateText(cycle.name, 15)} {truncateText(cycle.name, 15)}
</h3> </h3>
</Tooltip> </Tooltip>

8
apps/app/components/cycles/single-cycle-list.tsx
View File

@ -173,8 +173,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
}`} }`}
/> />
<div> <div>
<Tooltip tooltipContent={cycle.name} className="break-all" position="top-left"> <Tooltip
<h3 className="break-all text-base font-semibold"> tooltipContent={cycle.name}
className="break-words"
position="top-left"
>
<h3 className="break-words text-base font-semibold">
{truncateText(cycle.name, 70)} {truncateText(cycle.name, 70)}
</h3> </h3>
</Tooltip> </Tooltip>

4
apps/app/components/estimates/delete-estimate-modal.tsx
View File

@ -74,9 +74,9 @@ export const DeleteEstimateModal: React.FC<Props> = ({
</span> </span>
</div> </div>
<span> <span>
<p className="break-all text-sm leading-7 text-brand-secondary"> <p className="break-words text-sm leading-7 text-brand-secondary">
Are you sure you want to delete estimate-{" "} Are you sure you want to delete estimate-{" "}
<span className="break-all font-medium text-brand-base">{data.name}</span> <span className="break-words font-medium text-brand-base">{data.name}</span>
{""}? All of the data related to the estiamte will be permanently removed. {""}? All of the data related to the estiamte will be permanently removed.
This action cannot be undone. This action cannot be undone.
</p> </p>

2
apps/app/components/inbox/decline-issue-modal.tsx
View File

@ -72,7 +72,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
<span> <span>
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to decline issue{" "} Are you sure you want to decline issue{" "}
<span className="break-all font-medium text-brand-base"> <span className="break-words font-medium text-brand-base">
{data?.project_detail?.identifier}-{data?.sequence_id} {data?.project_detail?.identifier}-{data?.sequence_id}
</span> </span>
{""}? This action cannot be undone. {""}? This action cannot be undone.

2
apps/app/components/inbox/delete-issue-modal.tsx
View File

@ -127,7 +127,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
<span> <span>
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete issue{" "} Are you sure you want to delete issue{" "}
<span className="break-all font-medium text-brand-base"> <span className="break-words font-medium text-brand-base">
{data?.project_detail?.identifier}-{data?.sequence_id} {data?.project_detail?.identifier}-{data?.sequence_id}
</span> </span>
{""}? The issue will only be deleted from the inbox and this action cannot be {""}? The issue will only be deleted from the inbox and this action cannot be

2
apps/app/components/integration/delete-import-modal.tsx
View File

@ -104,7 +104,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
<span> <span>
<p className="text-sm leading-7 text-brand-secondary"> <p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete import from{" "} Are you sure you want to delete import from{" "}
<span className="break-all font-semibold capitalize text-brand-base"> <span className="break-words font-semibold capitalize text-brand-base">
{data?.service} {data?.service}
</span> </span>
? All of the data related to the import will be permanently removed. This ? All of the data related to the import will be permanently removed. This

2
apps/app/components/issues/delete-issue-modal.tsx
View File

@ -151,7 +151,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
<span> <span>
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete issue{" "} Are you sure you want to delete issue{" "}
<span className="break-all font-medium text-brand-base"> <span className="break-words font-medium text-brand-base">
{data?.project_detail.identifier}-{data?.sequence_id} {data?.project_detail.identifier}-{data?.sequence_id}
</span> </span>
{""}? All of the data related to the issue will be permanently removed. This {""}? All of the data related to the issue will be permanently removed. This

2
apps/app/components/issues/sub-issues-list.tsx
View File

@ -282,7 +282,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
<span className="flex-shrink-0 text-brand-secondary"> <span className="flex-shrink-0 text-brand-secondary">
{issue.project_detail.identifier}-{issue.sequence_id} {issue.project_detail.identifier}-{issue.sequence_id}
</span> </span>
<span className="max-w-sm break-all font-medium">{issue.name}</span> <span className="max-w-sm break-words font-medium">{issue.name}</span>
</div> </div>
{!isNotAllowed && ( {!isNotAllowed && (

2
apps/app/components/modules/delete-module-modal.tsx
View File

@ -111,7 +111,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete module-{" "} Are you sure you want to delete module-{" "}
<span className="break-all font-medium text-brand-base"> <span className="break-words font-medium text-brand-base">
{data?.name} {data?.name}
</span> </span>
? All of the data related to the module will be permanently removed. This ? All of the data related to the module will be permanently removed. This

2
apps/app/components/modules/single-module-card.tsx
View File

@ -138,7 +138,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
<Tooltip tooltipContent={module.name} position="top-left"> <Tooltip tooltipContent={module.name} position="top-left">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}> <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="w-auto max-w-[calc(100%-9rem)]"> <a className="w-auto max-w-[calc(100%-9rem)]">
<h3 className="truncate break-all text-lg font-semibold text-brand-base"> <h3 className="truncate break-words text-lg font-semibold text-brand-base">
{truncateText(module.name, 75)} {truncateText(module.name, 75)}
</h3> </h3>
</a> </a>

2
apps/app/components/pages/delete-page-modal.tsx
View File

@ -136,7 +136,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete Page-{" "} Are you sure you want to delete Page-{" "}
<span className="break-all font-medium text-brand-base"> <span className="break-words font-medium text-brand-base">
{data?.name} {data?.name}
</span> </span>
? All of the data related to the page will be permanently removed. This ? All of the data related to the page will be permanently removed. This

2
apps/app/components/pages/single-page-block.tsx
View File

@ -417,7 +417,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index,
</div> </div>
<div className={`flex items-start gap-2 px-3 ${snapshot.isDragging ? "" : "py-4"}`}> <div className={`flex items-start gap-2 px-3 ${snapshot.isDragging ? "" : "py-4"}`}>
<div <div
className="w-full cursor-pointer overflow-hidden break-all px-4" className="w-full cursor-pointer overflow-hidden break-words px-4"
onClick={() => setCreateBlockForm(true)} onClick={() => setCreateBlockForm(true)}
> >
<div className="flex items-center"> <div className="flex items-center">

8
apps/app/components/project/delete-project-modal.tsx
View File

@ -128,13 +128,13 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
<span> <span>
<p className="text-sm leading-7 text-brand-secondary"> <p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete project{" "} Are you sure you want to delete project{" "}
<span className="break-all font-semibold">{selectedProject?.name}</span>? All <span className="break-words font-semibold">{selectedProject?.name}</span>?
of the data related to the project will be permanently removed. This action All of the data related to the project will be permanently removed. This
cannot be undone action cannot be undone
</p> </p>
</span> </span>
<div className="text-brand-secondary"> <div className="text-brand-secondary">
<p className="break-all text-sm "> <p className="break-words text-sm ">
Enter the project name{" "} Enter the project name{" "}
<span className="font-medium text-brand-base">{selectedProject?.name}</span>{" "} <span className="font-medium text-brand-base">{selectedProject?.name}</span>{" "}
to continue: to continue:

2
apps/app/components/project/single-project-card.tsx
View File

@ -195,7 +195,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
</span> </span>
) : null} ) : null}
</div> </div>
<p className="mt-3.5 mb-7 break-all"> <p className="mt-3.5 mb-7 break-words">
{truncateText(project.description ?? "", 100)} {truncateText(project.description ?? "", 100)}
</p> </p>
</a> </a>

2
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -127,7 +127,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
}} }}
className={`${ className={`${
child.selected ? "bg-brand-surface-2" : "" child.selected ? "bg-brand-surface-2" : ""
} flex w-full items-center whitespace-nowrap break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`} } flex w-full items-center whitespace-nowrap break-words rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
> >
{child.label} {child.label}
</button> </button>

2
apps/app/components/views/delete-view-modal.tsx
View File

@ -115,7 +115,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-brand-secondary"> <p className="text-sm text-brand-secondary">
Are you sure you want to delete view-{" "} Are you sure you want to delete view-{" "}
<span className="break-all font-medium text-brand-base"> <span className="break-words font-medium text-brand-base">
{data?.name} {data?.name}
</span> </span>
? All of the data related to the view will be permanently removed. This ? All of the data related to the view will be permanently removed. This

8
apps/app/components/workspace/delete-workspace-modal.tsx
View File

@ -120,14 +120,14 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
<span> <span>
<p className="text-sm leading-7 text-brand-secondary"> <p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete workspace{" "} Are you sure you want to delete workspace{" "}
<span className="break-all font-semibold">{data?.name}</span>? All of the data <span className="break-words font-semibold">{data?.name}</span>? All of the
related to the workspace will be permanently removed. This action cannot be data related to the workspace will be permanently removed. This action cannot
undone. be undone.
</p> </p>
</span> </span>
<div className="text-brand-secondary"> <div className="text-brand-secondary">
<p className="break-all text-sm "> <p className="break-words text-sm ">
Enter the workspace name{" "} Enter the workspace name{" "}
<span className="font-medium text-brand-base">{selectedWorkspace?.name}</span>{" "} <span className="font-medium text-brand-base">{selectedWorkspace?.name}</span>{" "}
to continue: to continue: