From e70105235b5250a781a0f48624cec02a8c78e00f Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Tue, 3 Jun 2025 15:09:54 +0530
Subject: [PATCH] [WEB-4245] improvement: minor enhancements to project members
 settings page (#7153)

---
 .../projects/[projectId]/members/page.tsx     | 16 ++----
 web/core/components/project/member-list.tsx   | 56 +++++++++----------
 .../components/settings/content-wrapper.tsx   |  2 +-
 web/core/components/settings/layout.tsx       | 35 +-----------
 4 files changed, 32 insertions(+), 77 deletions(-)

diff --git a/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx b/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
index 458279b87..216a74631 100644
--- a/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
+++ b/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx
@@ -10,7 +10,7 @@ import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectMemberList, ProjectSettingsMemberDefaults } from "@/components/project";
 // hooks
-import { SettingsContentWrapper } from "@/components/settings";
+import { SettingsContentWrapper, SettingsHeading } from "@/components/settings";
 import { useProject, useUserPermissions } from "@/hooks/store";
 // plane web imports
 import { ProjectTeamspaceList } from "@/plane-web/components/projects/teamspaces";
@@ -42,16 +42,10 @@ const MembersSettingsPage = observer(() => {
   return (
     <SettingsContentWrapper size="lg">
       <PageHead title={pageTitle} />
-      <section className={`w-full`}>
-        <div className="flex items-center border-b border-custom-border-100 pb-3.5">
-          <div className="text-lg font-semibold">
-            {t(getProjectSettingsPageLabelI18nKey("members", "common.members"))}
-          </div>
-        </div>
-        <ProjectSettingsMemberDefaults projectId={projectId} workspaceSlug={workspaceSlug} />
-        <ProjectTeamspaceList projectId={projectId} workspaceSlug={workspaceSlug} />
-        <ProjectMemberList projectId={projectId} workspaceSlug={workspaceSlug} />
-      </section>
+      <SettingsHeading title={t(getProjectSettingsPageLabelI18nKey("members", "common.members"))} />
+      <ProjectSettingsMemberDefaults projectId={projectId} workspaceSlug={workspaceSlug} />
+      <ProjectTeamspaceList projectId={projectId} workspaceSlug={workspaceSlug} />
+      <ProjectMemberList projectId={projectId} workspaceSlug={workspaceSlug} />
     </SettingsContentWrapper>
   );
 });
diff --git a/web/core/components/project/member-list.tsx b/web/core/components/project/member-list.tsx
index 4a6722619..2314bb10e 100644
--- a/web/core/components/project/member-list.tsx
+++ b/web/core/components/project/member-list.tsx
@@ -12,8 +12,6 @@ import { ProjectMemberListItem, SendProjectInvitationModal } from "@/components/
 import { MembersSettingsLoader } from "@/components/ui";
 // hooks
 import { useEventTracker, useMember, useUserPermissions } from "@/hooks/store";
-import { getProjectSettingsPageLabelI18nKey } from "@/plane-web/helpers/project-settings";
-import { SettingsHeading } from "../settings";
 
 type TProjectMemberListProps = {
   projectId: string;
@@ -58,35 +56,31 @@ export const ProjectMemberList: React.FC<TProjectMemberListProps> = observer((pr
         projectId={projectId}
         workspaceSlug={workspaceSlug}
       />
-      <SettingsHeading
-        title={t(getProjectSettingsPageLabelI18nKey("members", "common.members"))}
-        appendToRight={
-          <div className="flex gap-2">
-            <div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
-              <Search className="h-3.5 w-3.5" />
-              <input
-                className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none placeholder:text-custom-text-400"
-                placeholder="Search"
-                value={searchQuery}
-                autoFocus
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-            {isAdmin && (
-              <Button
-                variant="primary"
-                onClick={() => {
-                  setTrackElement("PROJECT_SETTINGS_MEMBERS_PAGE_HEADER");
-                  setInviteModal(true);
-                }}
-              >
-                {t("add_member")}
-              </Button>
-            )}
-          </div>
-        }
-      />
-
+      <div className="flex items-center justify-between gap-4 py-2 overflow-x-hidden border-b border-custom-border-100">
+        <div className="text-base font-semibold">{t("common.members")}</div>
+        <div className="ml-auto flex items-center justify-start gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2 py-1">
+          <Search className="h-3.5 w-3.5" />
+          <input
+            className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none placeholder:text-custom-text-400"
+            placeholder="Search"
+            value={searchQuery}
+            autoFocus
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        {isAdmin && (
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {
+              setTrackElement("PROJECT_SETTINGS_MEMBERS_PAGE_HEADER");
+              setInviteModal(true);
+            }}
+          >
+            {t("add_member")}
+          </Button>
+        )}
+      </div>
       {!projectMemberIds ? (
         <MembersSettingsLoader />
       ) : (
diff --git a/web/core/components/settings/content-wrapper.tsx b/web/core/components/settings/content-wrapper.tsx
index 27b8b09d5..c65418d28 100644
--- a/web/core/components/settings/content-wrapper.tsx
+++ b/web/core/components/settings/content-wrapper.tsx
@@ -16,7 +16,7 @@ export const SettingsContentWrapper = observer((props: TProps) => {
         "md:px-16": size === "lg",
       })}
     >
-      <div className="pb-20 w-full">{children}</div>
+      <div className="pb-10 w-full">{children}</div>
     </div>
   );
 });
diff --git a/web/core/components/settings/layout.tsx b/web/core/components/settings/layout.tsx
index 522b6d137..ff2b567af 100644
--- a/web/core/components/settings/layout.tsx
+++ b/web/core/components/settings/layout.tsx
@@ -1,43 +1,10 @@
-import { useEffect, useRef } from "react";
-import throttle from "lodash/throttle";
+import { useRef } from "react";
 import { observer } from "mobx-react";
-import { useUserSettings } from "@/hooks/store";
 
 export const SettingsContentLayout = observer(({ children }: { children: React.ReactNode }) => {
   // refs
   const ref = useRef<HTMLDivElement>(null);
-  const scrolledRef = useRef(false);
-  // store hooks
-  const { toggleIsScrolled, isScrolled } = useUserSettings();
 
-  useEffect(() => {
-    toggleIsScrolled(false);
-    const container = ref.current;
-    if (!container) return;
-
-    const handleScroll = () => {
-      const scrollTop = container.scrollTop;
-      if (container.scrollHeight > container.clientHeight || scrolledRef.current) {
-        const _isScrolled = scrollTop > 0;
-        toggleIsScrolled(_isScrolled);
-      }
-    };
-
-    // Throttle the scroll handler to improve performance
-    // Set trailing to true to ensure the last call runs after the delay
-    const throttledHandleScroll = throttle(handleScroll, 150);
-
-    container.addEventListener("scroll", throttledHandleScroll);
-    return () => {
-      container.removeEventListener("scroll", throttledHandleScroll);
-      // Cancel any pending throttled invocations when unmounting
-      throttledHandleScroll.cancel();
-    };
-  }, []);
-
-  useEffect(() => {
-    scrolledRef.current = isScrolled;
-  }, [isScrolled]);
   return (
     <div className="w-full h-full min-h-full overflow-y-scroll " ref={ref}>
       {children}