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); const isEditingAllowed = alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER);
return ( 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]) => { {Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof IIssueFilterOptions; const filterKey = key as keyof IIssueFilterOptions;
@ -60,9 +60,9 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
return ( return (
<div <div
key={filterKey} 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> <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
{membersFilters.includes(filterKey) && ( {membersFilters.includes(filterKey) && (
<AppliedMembersFilters <AppliedMembersFilters
@ -141,7 +141,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
<button <button
type="button" type="button"
onClick={handleClearAllFilters} 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 Clear all
<X size={12} strokeWidth={2} /> <X size={12} strokeWidth={2} />