fix: kanban card state name and drop down items text overflow (#2686)

This commit is contained in:
Ramesh Kumar Chandra 2023-11-07 14:31:29 +05:30 committed by GitHub
parent baf17a109b
commit 0afb900678
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 9 deletions

View File

@ -66,9 +66,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
value: state.id,
query: state.name,
content: (
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full overflow-hidden">
<StateGroupIcon stateGroup={state.group} color={state.color} />
{state.name}
<div className="truncate inline-block line-clamp-1 w-full">{state.name}</div>
</div>
),
}));
@ -94,7 +94,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
<Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
{value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
<span className="truncate">{value?.name ?? "State"}</span>
<span className="truncate line-clamp-1 inline-block">{value?.name ?? "State"}</span>
</div>
</Tooltip>
);
@ -104,7 +104,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
{workspaceSlug && projectId && (
<Combobox
as="div"
className={`flex-shrink-0 text-left ${className}`}
className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
value={value.id}
onChange={(data: string) => {
const selectedState = projectStates?.find((state) => state.id === data);
@ -159,7 +159,11 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
{({ selected }) => (
<>
{option.content}
{selected && <Check className="h-3.5 w-3.5" />}
{selected && (
<div className="flex-shrink-0">
<Check className="h-3.5 w-3.5" />
</div>
)}
</>
)}
</Combobox.Option>

View File

@ -32,10 +32,6 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
}
);
console.log("--");
console.log("isLoading -- -->", isLoading);
console.log("--");
const activeLayout = issueFilterStore.userDisplayFilters.layout;
const issueCount = issueStore.getIssuesCount;