From c291ff05eea341b7f6221a7ef95dd0bcd4bc7422 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 9 Nov 2023 18:27:19 +0530
Subject: [PATCH] fix: fliter list item clear button alignment fix (#2741)

---
 .../filters/applied-filters/date.tsx          |  4 +-
 .../filters/applied-filters/filters-list.tsx  | 93 ++++++++++---------
 .../filters/applied-filters/label.tsx         |  4 +-
 .../filters/applied-filters/members.tsx       |  4 +-
 .../filters/applied-filters/priority.tsx      |  4 +-
 .../filters/applied-filters/project.tsx       |  4 +-
 .../roots/project-view-root.tsx               |  8 +-
 .../filters/applied-filters/state-group.tsx   |  4 +-
 .../filters/applied-filters/state.tsx         |  4 +-
 9 files changed, 68 insertions(+), 61 deletions(-)

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
index a94be20a6..cf3525838 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -36,7 +36,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <>
       {values.map((date) => (
         <div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
           <span className="normal-case">{getDateLabel(date)}</span>
@@ -49,6 +49,6 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
           </button>
         </div>
       ))}
-    </div>
+    </>
   );
 });
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 e8bc9c372..f7672ac75 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
@@ -50,50 +50,55 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
             className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
           >
             <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
-            {membersFilters.includes(filterKey) && (
-              <AppliedMembersFilters
-                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
-                members={members}
-                values={value}
-              />
-            )}
-            {dateFilters.includes(filterKey) && (
-              <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
-            )}
-            {filterKey === "labels" && (
-              <AppliedLabelsFilters
-                handleRemove={(val) => handleRemoveFilter("labels", val)}
-                labels={labels}
-                values={value}
-              />
-            )}
-            {filterKey === "priority" && (
-              <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
-            )}
-            {filterKey === "state" && states && (
-              <AppliedStateFilters
-                handleRemove={(val) => handleRemoveFilter("state", val)}
-                states={states}
-                values={value}
-              />
-            )}
-            {filterKey === "state_group" && (
-              <AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
-            )}
-            {filterKey === "project" && (
-              <AppliedProjectFilters
-                handleRemove={(val) => handleRemoveFilter("project", val)}
-                projects={projects}
-                values={value}
-              />
-            )}
-            <button
-              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-              onClick={() => handleRemoveFilter(filterKey, null)}
-            >
-              <X size={12} strokeWidth={2} />
-            </button>
+            <div className="flex items-center gap-1 flex-wrap">
+              {membersFilters.includes(filterKey) && (
+                <AppliedMembersFilters
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  members={members}
+                  values={value}
+                />
+              )}
+              {dateFilters.includes(filterKey) && (
+                <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
+              )}
+              {filterKey === "labels" && (
+                <AppliedLabelsFilters
+                  handleRemove={(val) => handleRemoveFilter("labels", val)}
+                  labels={labels}
+                  values={value}
+                />
+              )}
+              {filterKey === "priority" && (
+                <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
+              )}
+              {filterKey === "state" && states && (
+                <AppliedStateFilters
+                  handleRemove={(val) => handleRemoveFilter("state", val)}
+                  states={states}
+                  values={value}
+                />
+              )}
+              {filterKey === "state_group" && (
+                <AppliedStateGroupFilters
+                  handleRemove={(val) => handleRemoveFilter("state_group", val)}
+                  values={value}
+                />
+              )}
+              {filterKey === "project" && (
+                <AppliedProjectFilters
+                  handleRemove={(val) => handleRemoveFilter("project", val)}
+                  projects={projects}
+                  values={value}
+                />
+              )}
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemoveFilter(filterKey, null)}
+              >
+                <X size={12} strokeWidth={2} />
+              </button>
+            </div>
           </div>
         );
       })}
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
index abc5a8b2c..ee597575f 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -15,7 +15,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, labels, values } = props;
 
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <>
       {values.map((labelId) => {
         const labelDetails = labels?.find((l) => l.id === labelId);
 
@@ -40,6 +40,6 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
           </div>
         );
       })}
-    </div>
+    </>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
index cef65882c..dc8ac397c 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -15,7 +15,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, members, values } = props;
 
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <>
       {values.map((memberId) => {
         const memberDetails = members?.find((m) => m.id === memberId);
 
@@ -35,6 +35,6 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
           </div>
         );
       })}
-    </div>
+    </>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index 7b76f8b51..198589a26 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -15,7 +15,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values } = props;
 
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <>
       {values.map((priority) => (
         <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
           <PriorityIcon
@@ -42,6 +42,6 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
           </button>
         </div>
       ))}
-    </div>
+    </>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
index d8bc758ea..51b49fbff 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -16,7 +16,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, projects, values } = props;
 
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <>
       {values.map((projectId) => {
         const projectDetails = projects?.find((p) => p.id === projectId);
 
@@ -44,6 +44,6 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
           </div>
         );
       })}
-    </div>
+    </>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
index 96a2dab37..5f797a6ce 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -104,9 +104,11 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
         states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
       {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
-        <Button variant="primary" size="sm" onClick={handleUpdateView}>
-          Update view
-        </Button>
+        <div className="flex items-center justify-center flex-shrink-0">
+          <Button variant="primary" size="sm" onClick={handleUpdateView}>
+            Update view
+          </Button>
+        </div>
       )}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
index d0707efda..eadf34005 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -14,7 +14,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values } = props;
 
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <>
       {values.map((stateGroup) => (
         <div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
           <StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
@@ -28,6 +28,6 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
           </button>
         </div>
       ))}
-    </div>
+    </>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
index eadcd88ad..c307d21c5 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -16,7 +16,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, states, values } = props;
 
   return (
-    <div className="flex items-center gap-1 flex-wrap">
+    <>
       {values.map((stateId) => {
         const stateDetails = states?.find((s) => s.id === stateId);
 
@@ -36,6 +36,6 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
           </div>
         );
       })}
-    </div>
+    </>
   );
 });