From 6c7ba3bc79130018e5167fe0343150d7842007e8 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 11 Mar 2024 21:01:59 +0530
Subject: [PATCH] chore: applied filter ui improvement (#3918)

---
 .../issue-layouts/filters/applied-filters/filters-list.tsx    | 4 ++--
 .../filters/applied-filters/roots/archived-issue.tsx          | 2 +-
 .../filters/applied-filters/roots/cycle-root.tsx              | 2 +-
 .../filters/applied-filters/roots/draft-issue.tsx             | 2 +-
 .../filters/applied-filters/roots/module-root.tsx             | 2 +-
 .../filters/applied-filters/roots/project-root.tsx            | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
index 467258273..94f2b30d1 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -62,8 +62,8 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
             key={filterKey}
             className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
           >
-            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
-            <div className="flex flex-wrap items-center gap-1">
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters
                   editable={isEditingAllowed}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
index 7e6926fa5..369431900 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@@ -68,7 +68,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
index ee6b4e694..d8c5320d0 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@@ -77,7 +77,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
index 61c0e346a..a6f2042d2 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
@@ -63,7 +63,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
index fc78d79ea..7fd7b624f 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@@ -76,7 +76,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   if (!workspaceSlug || !projectId || Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
index 602f3fa2d..96b79a596 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -68,7 +68,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex items-center justify-between p-4">
+    <div className="flex items-center justify-between p-4 gap-2.5">
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}