From f54a9502f8a159beb9ed1e14abe388229818bde1 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 18 Oct 2023 13:56:52 +0530
Subject: [PATCH] fix: global view filters dropdown overflow issue (#2469)

* fix: global view filters dropdown overflow issue

* chore: rename View to Display

* fix: gap between dropdowns in header
---
 web/components/headers/cycle-issues.tsx          | 2 +-
 web/components/headers/global-issues.tsx         | 4 ++--
 web/components/headers/module-issues.tsx         | 2 +-
 web/components/headers/project-issues.tsx        | 8 +++-----
 web/components/headers/project-view-issues.tsx   | 2 +-
 web/components/profile/profile-issues-filter.tsx | 2 +-
 6 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index c6d512d22..f8fbfca40 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -115,7 +115,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>
-        <FiltersDropdown title="View">
+        <FiltersDropdown title="Display">
           <DisplayFiltersSelection
             displayFilters={issueFilterStore.userDisplayFilters}
             displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 95ba2a182..b80dd45a1 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -98,7 +98,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="relative w-full flex items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex gap-2 items-center">
           {activeLayout === "spreadsheet" && <CheckCircle size={16} strokeWidth={2} />}
           <span className="text-sm font-medium">Workspace {activeLayout === "spreadsheet" ? "Issues" : "Views"}</span>
@@ -139,7 +139,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                 </FiltersDropdown>
               )}
 
-              <FiltersDropdown title="View">
+              <FiltersDropdown title="Display">
                 <DisplayFiltersSelection
                   displayFilters={workspaceFilterStore.workspaceDisplayFilters}
                   displayProperties={workspaceFilterStore.workspaceDisplayProperties}
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index d0ac26cce..c63c93bc4 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -115,7 +115,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>
-        <FiltersDropdown title="View">
+        <FiltersDropdown title="Display">
           <DisplayFiltersSelection
             displayFilters={issueFilterStore.userDisplayFilters}
             displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 25a2addaf..05f88cf75 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -100,9 +100,7 @@ export const ProjectIssuesHeader: FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={projectDetails ?? undefined}
       />
-      <div
-        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
-      >
+      <div className="relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
           <div className="block md:hidden">
             <button
@@ -128,7 +126,7 @@ export const ProjectIssuesHeader: FC = observer(() => {
             </Breadcrumbs>
           </div>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
           <LayoutSelection
             layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
             onChange={(layout) => handleLayoutChange(layout)}
@@ -146,7 +144,7 @@ export const ProjectIssuesHeader: FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="View">
+          <FiltersDropdown title="Display">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 0b7134dfd..71026ce74 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -99,7 +99,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
         />
       </FiltersDropdown>
-      <FiltersDropdown title="View">
+      <FiltersDropdown title="Display">
         <DisplayFiltersSelection
           displayFilters={issueFilterStore.userDisplayFilters}
           displayProperties={issueFilterStore.userDisplayProperties}
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
index ad02673c4..5dd6b1b3a 100644
--- a/web/components/profile/profile-issues-filter.tsx
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -54,7 +54,7 @@ export const ProfileIssuesFilter = observer(() => {
         />
       </FiltersDropdown>
 
-      <FiltersDropdown title="View">
+      <FiltersDropdown title="Display">
         <DisplayFiltersSelection
           displayFilters={profileIssueFiltersStore.userDisplayFilters}
           displayProperties={profileIssueFiltersStore.userDisplayProperties}