binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1027] fix: overflow & alignment fixes (#4234)

Browse source 
* 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
This commit is contained in:
Anmol Singh Bhatia 2024-04-23 12:53:52 +05:30 • committed by GitHub
parent f77d2d8c0a
commit e0e8ce633b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 17 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
View file

@ -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"

4
web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
View file

@ -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

4
web/components/issues/issue-layouts/filters/applied-filters/module.tsx
View file

@ -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"

12
web/components/issues/issue-layouts/list/block.tsx
View file

@ -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