UI - TASKER: stabilize member controls

plane-src/apps/web/ce/components/projects/settings/useProjectColumns.tsx

@@ -11,7 +11,7 @@ import type { IWorkspaceMember, TProjectMembership } from "@plane/types";
 import { renderFormattedDate } from "@plane/utils";
 // components
 import { MemberHeaderColumn } from "@/components/project/member-header-column";
-import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
+import { AccountTypeColumn, NameColumn, ProjectMemberActionsColumn } from "@/components/project/settings/member-columns";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
@@ -21,6 +21,9 @@ export interface RowData extends Pick<TProjectMembership, "original_role"> {
   member: IWorkspaceMember;
 }
 
+const stickyNameHeaderClassName = "nodedc-settings-table-sticky left-0 z-20 min-w-max";
+const stickyNameCellClassName = "nodedc-settings-table-sticky left-0 z-10 min-w-max";
+
 type TUseProjectColumnsProps = {
   projectId: string;
   workspaceSlug: string;
@@ -60,13 +63,16 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
     {
       key: "Full Name",
       content: "Full name",
-      thClassName: "text-left",
+      thClassName: stickyNameHeaderClassName,
+      tdClassName: stickyNameCellClassName,
       thRender: () => (
-        <MemberHeaderColumn
-          property="full_name"
-          displayFilters={displayFilters}
-          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
-        />
+        <div className="w-max min-w-[8.5rem] pr-3">
+          <MemberHeaderColumn
+            property="full_name"
+            displayFilters={displayFilters}
+            handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          />
+        </div>
       ),
       tdRender: (rowData: RowData) => (
         <NameColumn
@@ -88,7 +94,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
+      tdRender: (rowData: RowData) => <div className="min-w-[7.5rem] pr-3">{rowData.member.display_name}</div>,
     },
     {
       key: "Email",
@@ -100,7 +106,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <div className="w-48 text-secondary">{rowData.member.email}</div>,
+      tdRender: (rowData: RowData) => <div className="min-w-[10.5rem] pr-3 text-secondary">{rowData.member.email}</div>,
     },
     {
       key: "Account Type",
@@ -131,7 +137,22 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <div>{renderFormattedDate(rowData?.member?.joining_date)}</div>,
+      tdRender: (rowData: RowData) => (
+        <div className="min-w-[7rem] pr-3">{renderFormattedDate(rowData?.member?.joining_date)}</div>
+      ),
+    },
+    {
+      key: "Actions",
+      content: <span className="sr-only">Действия</span>,
+      tdRender: (rowData: RowData) => (
+        <ProjectMemberActionsColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
     },
   ];
   return {