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

[WEB-5784] fix: truncation issue in wi properties (#8422)

Browse source 
* fix: update background surface 2 variables in tailwind config

* fix: improve layout and truncation handling in issue link and list items
This commit is contained in:
Jayash Tripathy 2025-12-22 20:31:51 +05:30 • committed by GitHub
parent 7a3cebdb6b
commit cb9b4f7887
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
View file

@ -160,7 +160,7 @@ export const SubIssuesListItem = observer(function SubIssuesListItem(props: Prop
</div>
</WithDisplayPropertiesHOC>
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
<span className="w-full truncate text-13 text-primary">{issue.name}</span>
<span className="flex-1 w-0 truncate text-13 text-primary">{issue.name}</span>
</Tooltip>
</div>

13
apps/web/core/components/issues/issue-detail/links/link-item.tsx
View file

@ -49,23 +49,24 @@ export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkIt
key={linkId}
className="group col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-10 flex-shrink-0 px-3 bg-surface-2 hover:bg-layer-1 border-[0.5px] border-subtle rounded-sm"
>
<div className="flex items-center gap-2.5 truncate flex-grow">
<div className="flex items-center gap-2.5 min-w-0 flex-1">
{faviconUrl ? (
<img src={faviconUrl} alt="favicon" className="size-4" />
<img src={faviconUrl} alt="favicon" className="size-4 flex-shrink-0" />
) : (
<Link className="size-4 text-tertiary group-hover:text-primary" />
<Link className="size-4 text-tertiary group-hover:text-primary flex-shrink-0" />
)}
<Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
<a
href={linkDetail.url}
target="_blank"
rel="noopener noreferrer"
className="truncate text-body-xs-regular cursor-pointer flex-grow flex items-center gap-3"
className="flex-1 w-0 text-body-xs-regular cursor-pointer flex items-center gap-3"
>
<span className="truncate">
{linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
</span>
{linkTitle && linkTitle !== "" && (
<span className="text-placeholder text-caption-sm-regular">{linkTitle}</span>
<span className="text-placeholder text-caption-sm-regular flex-shrink-0">{linkTitle}</span>
)}
</a>
</Tooltip>

4
apps/web/core/components/issues/relations/issue-list-item.tsx
View file

@ -126,7 +126,7 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
{issue && (
<div className="group relative flex min-h-11 h-full w-full items-center px-1.5 py-1 transition-all hover:bg-surface-2">
<span className="size-5 flex-shrink-0" />
<div className="flex w-full truncate cursor-pointer items-center gap-3">
<div className="flex flex-1 min-w-0 cursor-pointer items-center gap-3">
<div className="flex-shrink-0">
{projectDetail && (
<IssueIdentifier
@ -141,7 +141,7 @@ export const RelationIssueListItem = observer(function RelationIssueListItem(pro
</div>
<Tooltip tooltipContent={issue.name} isMobile={isMobile}>
<span className="w-full truncate text-13 text-primary">{issue.name}</span>
<span className="flex-1 w-0 truncate text-13 text-primary">{issue.name}</span>
</Tooltip>
</div>
<div

4
packages/tailwind-config/variables.css
View file

@ -297,7 +297,7 @@
/* Background colors */
--background-color-canvas: var(--color-neutral-300);
--background-color-surface-1: var(--color-neutral-white);
--background-color-surface-2: var(--color-neutral-200);
--background-color-surface-2: var(--color-neutral-100);
--background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-neutral-300);
--background-color-layer-1-active: var(--color-neutral-400);
@ -621,7 +621,7 @@
/* Background colors */
--background-color-canvas: var(--color-neutral-black);
--background-color-surface-1: var(--color-neutral-100);
--background-color-surface-2: var(--color-neutral-100);
--background-color-surface-2: var(--color-neutral-200);
--background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-neutral-300);
--background-color-layer-1-active: var(--color-neutral-400);