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

@@ -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}

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}

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}

web/components/headers/project-issues.tsx

@@ -100,9 +100,7 @@ export const ProjectIssuesHeader: FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={projectDetails ?? undefined}
       />
-      <div
+      <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">
-        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}

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}

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}