chore: applied filter responsiveness (#4263)

This commit is contained in:
Anmol Singh Bhatia 2024-04-24 15:16:00 +05:30 committed by GitHub
parent 695892d66e
commit 196724214b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -50,7 +50,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
const isEditingAllowed = alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER);
return (
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
<div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate">
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof IIssueFilterOptions;
@ -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 w-full"
className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize truncate"
>
<div className="flex flex-wrap items-center gap-1.5 w-full">
<div className="flex flex-wrap items-center gap-1.5 truncate">
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
{membersFilters.includes(filterKey) && (
<AppliedMembersFilters
@ -141,7 +141,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
<button
type="button"
onClick={handleClearAllFilters}
className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
className="flex items-center gap-2 flex-shrink-0 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
>
Clear all
<X size={12} strokeWidth={2} />