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)}
</span>
)}
<h5 className="break-all">
<h5 className="break-words">
{project.name}
<span className="text-brand-secondary text-xs ml-1">
({project.identifier})
@ -276,7 +276,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{projectId ? (
cycleId && cycleDetails ? (
<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="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6>
@ -304,7 +304,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
</div>
) : moduleId && moduleDetails ? (
<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="flex items-center gap-2 text-xs">
<h6 className="text-brand-secondary">Lead</h6>
@ -352,7 +352,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
{projectDetails?.name.charAt(0)}
</span>
)}
<h4 className="font-medium break-all">{projectDetails?.name}</h4>
<h4 className="font-medium break-words">{projectDetails?.name}</h4>
</div>
<div className="space-y-4 mt-4">
<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">
<h3 className="break-all">
<h3 className="break-words">
Analytics for{" "}
{cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
</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] : "?"}
</div>
)}
<span className="break-all text-brand-secondary">
<span className="break-words text-brand-secondary">
{user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
</span>
</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">
<p className={`${icon ? "flex items-center gap-2" : ""}`}>
{icon}
<span className="break-all">{title}</span>
<span className="break-words">{title}</span>
</p>
</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}
</div>
)}
<h5 className="text-sm group-hover:text-brand-accent">
{truncateText(issue.name, 120)}
<h5 className="text-sm group-hover:text-brand-accent break-words line-clamp-3">
{issue.name}
</h5>
</a>
</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" />
</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">
Added {timeAgo(link.created_at)}
<br />

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

@ -226,7 +226,7 @@ export const ActiveCycleDetails: React.FC = () => {
/>
</span>
<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)}
</h3>
</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">
<p className="text-sm text-brand-secondary">
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}
</span>
? 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>
<Tooltip tooltipContent={cycle.name} className="break-all" position="top-left">
<h3 className="break-all text-lg font-semibold">
<Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
<h3 className="break-words text-lg font-semibold">
{truncateText(cycle.name, 15)}
</h3>
</Tooltip>

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

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

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

@ -74,9 +74,9 @@ export const DeleteEstimateModal: React.FC<Props> = ({
</span>
</div>
<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-{" "}
<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.
This action cannot be undone.
</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>
<p className="text-sm text-brand-secondary">
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}
</span>
{""}? 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>
<p className="text-sm text-brand-secondary">
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}
</span>
{""}? 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>
<p className="text-sm leading-7 text-brand-secondary">
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}
</span>
? 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>
<p className="text-sm text-brand-secondary">
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}
</span>
{""}? 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">
{issue.project_detail.identifier}-{issue.sequence_id}
</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>
{!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">
<p className="text-sm text-brand-secondary">
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}
</span>
? 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">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<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)}
</h3>
</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">
<p className="text-sm text-brand-secondary">
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}
</span>
? 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 className={`flex items-start gap-2 px-3 ${snapshot.isDragging ? "" : "py-4"}`}>
<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)}
>
<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>
<p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete project{" "}
<span className="break-all font-semibold">{selectedProject?.name}</span>? All
of the data related to the project will be permanently removed. This action
cannot be undone
<span className="break-words font-semibold">{selectedProject?.name}</span>?
All of the data related to the project will be permanently removed. This
action cannot be undone
</p>
</span>
<div className="text-brand-secondary">
<p className="break-all text-sm ">
<p className="break-words text-sm ">
Enter the project name{" "}
<span className="font-medium text-brand-base">{selectedProject?.name}</span>{" "}
to continue:

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

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

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

@ -127,7 +127,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
}}
className={`${
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}
</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">
<p className="text-sm text-brand-secondary">
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}
</span>
? 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>
<p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete workspace{" "}
<span className="break-all font-semibold">{data?.name}</span>? All of the data
related to the workspace will be permanently removed. This action cannot be
undone.
<span className="break-words font-semibold">{data?.name}</span>? All of the
data related to the workspace will be permanently removed. This action cannot
be undone.
</p>
</span>
<div className="text-brand-secondary">
<p className="break-all text-sm ">
<p className="break-words text-sm ">
Enter the workspace name{" "}
<span className="font-medium text-brand-base">{selectedWorkspace?.name}</span>{" "}
to continue: