fix: cycle and module sidebar overflow fix

This commit is contained in:
anmolsinghbhatia 2023-06-29 18:19:38 +05:30
parent 8229b12c9c
commit f2a4e026a5
2 changed files with 12 additions and 4 deletions

View File

@ -408,7 +408,11 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div className="flex w-full flex-col gap-6 px-6 py-6"> <div className="flex w-full flex-col gap-6 px-6 py-6">
<div className="flex w-full flex-col items-start justify-start gap-2"> <div className="flex w-full flex-col items-start justify-start gap-2">
<div className="flex w-full items-start justify-between gap-2"> <div className="flex w-full items-start justify-between gap-2">
<h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4> <div className="max-w-[300px]">
<h4 className="text-xl font-semibold text-brand-base break-words w-full">
{cycle.name}
</h4>
</div>
<CustomMenu width="lg" ellipsis> <CustomMenu width="lg" ellipsis>
{!isCompleted && ( {!isCompleted && (
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
@ -427,7 +431,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</CustomMenu> </CustomMenu>
</div> </div>
<span className="whitespace-normal text-sm leading-5 text-brand-secondary"> <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
{cycle.description} {cycle.description}
</span> </span>
</div> </div>

View File

@ -322,7 +322,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
<div className="flex w-full flex-col gap-6 px-6 py-6"> <div className="flex w-full flex-col gap-6 px-6 py-6">
<div className="flex w-full flex-col items-start justify-start gap-2"> <div className="flex w-full flex-col items-start justify-start gap-2">
<div className="flex w-full items-start justify-between gap-2 "> <div className="flex w-full items-start justify-between gap-2 ">
<h4 className="text-xl font-semibold text-brand-base">{module.name}</h4> <div className="max-w-[300px]">
<h4 className="text-xl font-semibold break-words w-full text-brand-base">
{module.name}
</h4>
</div>
<CustomMenu width="lg" ellipsis> <CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2"> <span className="flex items-center justify-start gap-2">
@ -339,7 +343,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
</CustomMenu> </CustomMenu>
</div> </div>
<span className="whitespace-normal text-sm leading-5 text-brand-secondary"> <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
{module.description} {module.description}
</span> </span>
</div> </div>