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