From 844f2bb72c7bb7bf0a147bde69fe57e8d0fd8e6f Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Wed, 16 Jul 2025 14:48:57 -0700
Subject: [PATCH 1/3] improvements: org and project policy page ui improvements

---
 .../RoleByIDPage/RoleByIDPage.tsx             | 90 +++++++++++-------
 .../components/RoleDetailsSection.tsx         | 95 -------------------
 .../OrgPermissionAdminConsoleRow.tsx          | 15 +--
 .../OrgPermissionAppConnectionRow.tsx         | 15 +--
 .../OrgPermissionBillingRow.tsx               | 15 +--
 .../OrgPermissionGatewayRow.tsx               | 15 +--
 .../OrgPermissionGroupRow.tsx                 | 15 +--
 .../OrgPermissionIdentityRow.tsx              | 15 +--
 .../OrgPermissionKmipRow.tsx                  | 15 +--
 .../OrgPermissionSecretShareRow.tsx           | 15 +--
 .../OrgRoleWorkspaceRow.tsx                   | 15 +--
 .../RolePermissionRow.tsx                     | 15 +--
 .../RolePermissionsSection.tsx                | 40 ++++----
 .../RoleDetailsBySlugPage.tsx                 | 26 +++++
 .../components/GeneralPermissionPolicies.tsx  |  6 +-
 .../components/RolePermissionsSection.tsx     |  3 +-
 16 files changed, 187 insertions(+), 223 deletions(-)
 delete mode 100644 frontend/src/pages/organization/RoleByIDPage/components/RoleDetailsSection.tsx

diff --git a/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx b/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
index 7b68b7fdd..19a5608be 100644
--- a/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
@@ -1,7 +1,8 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faCopy, faEllipsisV } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
-import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
@@ -12,8 +13,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  PageHeader,
-  Tooltip
+  PageHeader
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
@@ -22,7 +22,7 @@ import { usePopUp } from "@app/hooks/usePopUp";
 import { DuplicateOrgRoleModal } from "@app/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal";
 import { OrgAccessControlTabSections } from "@app/types/org";
 
-import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
+import { RoleModal, RolePermissionsSection } from "./components";
 
 export const Page = () => {
   const navigate = useNavigate();
@@ -80,29 +80,64 @@ export const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader
+            title={
+              <div className="flex flex-col">
+                <div>
+                  <span>{data.name}</span>
+                  <p className="text-sm font-[400] normal-case leading-3 text-mineshaft-400">
+                    {data.slug} {data.description && `- ${data.description}`}
+                  </p>
+                </div>
+              </div>
+            }
+          >
             {isCustomRole && (
               <DropdownMenu>
-                <DropdownMenuTrigger asChild className="rounded-lg">
-                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                    <Tooltip content="More options">
-                      <Button variant="outline_bg">More</Button>
-                    </Tooltip>
-                  </div>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    colorSchema="secondary"
+                    rightIcon={<FontAwesomeIcon icon={faEllipsisV} className="ml-2" />}
+                  >
+                    Options
+                  </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="p-1">
+                <DropdownMenuContent align="end" sideOffset={2} className="p-1">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      navigator.clipboard.writeText(data.id);
+
+                      createNotification({
+                        text: "Copied ID to clipboard",
+                        type: "info"
+                      });
+                    }}
+                    icon={<FontAwesomeIcon icon={faCopy} />}
+                  >
+                    Copy ID
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      navigator.clipboard.writeText(data.slug);
+
+                      createNotification({
+                        text: "Copied slug to clipboard",
+                        type: "info"
+                      });
+                    }}
+                    icon={<FontAwesomeIcon icon={faCopy} />}
+                  >
+                    Copy Slug
+                  </DropdownMenuItem>
                   <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
                     {(isAllowed) => (
                       <DropdownMenuItem
-                        className={twMerge(
-                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                        )}
-                        onClick={async () => {
+                        onClick={() => {
                           handlePopUpOpen("role", {
                             roleId
                           });
                         }}
-                        disabled={!isAllowed}
+                        isDisabled={!isAllowed}
                       >
                         Edit Role
                       </DropdownMenuItem>
@@ -111,13 +146,10 @@ export const Page = () => {
                   <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
                     {(isAllowed) => (
                       <DropdownMenuItem
-                        className={twMerge(
-                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                        )}
                         onClick={() => {
                           handlePopUpOpen("duplicateRole");
                         }}
-                        disabled={!isAllowed}
+                        isDisabled={!isAllowed}
                       >
                         Duplicate Role
                       </DropdownMenuItem>
@@ -126,15 +158,10 @@ export const Page = () => {
                   <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Role}>
                     {(isAllowed) => (
                       <DropdownMenuItem
-                        className={twMerge(
-                          isAllowed
-                            ? "hover:!bg-red-500 hover:!text-white"
-                            : "pointer-events-none cursor-not-allowed opacity-50"
-                        )}
-                        onClick={async () => {
+                        onClick={() => {
                           handlePopUpOpen("deleteOrgRole");
                         }}
-                        disabled={!isAllowed}
+                        isDisabled={!isAllowed}
                       >
                         Delete Role
                       </DropdownMenuItem>
@@ -144,12 +171,7 @@ export const Page = () => {
               </DropdownMenu>
             )}
           </PageHeader>
-          <div className="flex">
-            <div className="mr-4 w-96">
-              <RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
-            </div>
-            <RolePermissionsSection roleId={roleId} />
-          </div>
+          <RolePermissionsSection roleId={roleId} />
         </div>
       )}
       <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RoleDetailsSection.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RoleDetailsSection.tsx
deleted file mode 100644
index ee93ccfba..000000000
--- a/frontend/src/pages/organization/RoleByIDPage/components/RoleDetailsSection.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { OrgPermissionCan } from "@app/components/permissions";
-import { IconButton, Tooltip } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useTimedReset } from "@app/hooks";
-import { useGetOrgRole } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  roleId: string;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["role"]>, data?: object) => void;
-};
-
-export const RoleDetailsSection = ({ roleId, handlePopUpOpen }: Props) => {
-  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
-    initialState: "Copy ID to clipboard"
-  });
-
-  const { currentOrg } = useOrganization();
-  const orgId = currentOrg?.id || "";
-  const { data } = useGetOrgRole(orgId, roleId);
-  const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
-
-  return data ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-semibold text-mineshaft-100">Org Role Details</h3>
-        {isCustomRole && (
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
-            {(isAllowed) => {
-              return (
-                <Tooltip content="Edit Role">
-                  <IconButton
-                    isDisabled={!isAllowed}
-                    ariaLabel="copy icon"
-                    variant="plain"
-                    className="group relative"
-                    onClick={() =>
-                      handlePopUpOpen("role", {
-                        roleId
-                      })
-                    }
-                  >
-                    <FontAwesomeIcon icon={faPencil} />
-                  </IconButton>
-                </Tooltip>
-              );
-            }}
-          </OrgPermissionCan>
-        )}
-      </div>
-      <div className="pt-4">
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Role ID</p>
-          <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{roleId}</p>
-            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-              <Tooltip content={copyTextId}>
-                <IconButton
-                  ariaLabel="copy icon"
-                  variant="plain"
-                  className="group relative ml-2"
-                  onClick={() => {
-                    navigator.clipboard.writeText(roleId);
-                    setCopyTextId("Copied");
-                  }}
-                >
-                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
-                </IconButton>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{data.name}</p>
-        </div>
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Slug</p>
-          <p className="text-sm text-mineshaft-300">{data.slug}</p>
-        </div>
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Description</p>
-          <p className="text-sm text-mineshaft-300">
-            {data.description?.length ? data.description : "-"}
-          </p>
-        </div>
-      </div>
-    </div>
-  ) : (
-    <div />
-  );
-};
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
index 2c2ac5dce..e9f103153 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
@@ -76,17 +76,18 @@ export const OrgPermissionAdminConsoleRow = ({ isEditable, control, setValue }:
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>Organization Admin Console</Td>
+        <Td className="w-full select-none">Organization Admin Console</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.Custom}>Custom</SelectItem>
@@ -97,9 +98,9 @@ export const OrgPermissionAdminConsoleRow = ({ isEditable, control, setValue }:
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
index 7a5cb25c7..8350c3730 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
@@ -124,17 +124,18 @@ export const OrgPermissionAppConnectionRow = ({ isEditable, control, setValue }:
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>App Connections</Td>
+        <Td className="w-full select-none">App Connections</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
@@ -147,9 +148,9 @@ export const OrgPermissionAppConnectionRow = ({ isEditable, control, setValue }:
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
index c99ea2f0e..e8dfca206 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
@@ -112,17 +112,18 @@ export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>Billing</Td>
+        <Td className="w-full select-none">Billing</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
@@ -135,9 +136,9 @@ export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
index 2ffd726c2..5b1d4e341 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
@@ -121,17 +121,18 @@ export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>Gateways</Td>
+        <Td className="w-full select-none">Gateways</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
@@ -144,9 +145,9 @@ export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
index 3ffa5dd6a..10f0b2cd7 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
@@ -145,17 +145,18 @@ export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props)
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>Group Management</Td>
+        <Td className="w-full select-none">Group Management</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
@@ -168,9 +169,9 @@ export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props)
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
index bbd01c503..4fff84852 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
@@ -155,17 +155,18 @@ export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Prop
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>Machine Identity Management</Td>
+        <Td className="w-full select-none">Machine Identity Management</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
@@ -178,9 +179,9 @@ export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Prop
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
index d4ed86c3c..b890bd11a 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
@@ -73,17 +73,18 @@ export const OrgPermissionKmipRow = ({ isEditable, control, setValue }: Props) =
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>KMIP</Td>
+        <Td className="w-full select-none">KMIP</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.Custom}>Custom</SelectItem>
@@ -94,9 +95,9 @@ export const OrgPermissionKmipRow = ({ isEditable, control, setValue }: Props) =
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
index 4a35644c7..8cd890a36 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
@@ -70,17 +70,18 @@ export const OrgPermissionSecretShareRow = ({ isEditable, control, setValue }: P
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>Secret Share</Td>
+        <Td className="w-full select-none">Secret Share</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.Custom}>Custom</SelectItem>
@@ -91,9 +92,9 @@ export const OrgPermissionSecretShareRow = ({ isEditable, control, setValue }: P
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
index e7986cebd..f3216b82a 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
@@ -70,17 +70,18 @@ export const OrgRoleWorkspaceRow = ({ isEditable, control, setValue }: Props) =>
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>Project</Td>
+        <Td className="w-full select-none">Project</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.Custom}>Custom</SelectItem>
@@ -91,9 +92,9 @@ export const OrgRoleWorkspaceRow = ({ isEditable, control, setValue }: Props) =>
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
index 11f128b18..853180f1b 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
@@ -158,17 +158,18 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
         className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
         onClick={() => setIsRowExpanded.toggle()}
       >
-        <Td>
-          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
         </Td>
-        <Td>{title}</Td>
+        <Td className="w-full select-none">{title}</Td>
         <Td>
           <Select
             value={selectedPermissionCategory}
-            className="w-40 bg-mineshaft-600"
-            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
             onValueChange={handlePermissionChange}
             isDisabled={!isEditable}
+            position="popper"
           >
             <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
             <SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
@@ -181,9 +182,9 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
         <Tr>
           <Td
             colSpan={3}
-            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
           >
-            <div className="grid grid-cols-3 gap-4">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {getPermissionList(formName).map(({ action, label }) => {
                 return (
                   <Controller
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
index 32e24bb58..d1418a664 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
@@ -1,8 +1,10 @@
 import { useForm } from "react-hook-form";
+import { faSave } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
+import { Button, Table, TableContainer, TBody } from "@app/components/v2";
 import { OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
 import { OrgPermissionAppConnectionRow } from "@app/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow";
@@ -117,39 +119,39 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
       className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-semibold text-mineshaft-100">Permissions</h3>
+        <div>
+          <h3 className="text-lg font-semibold text-mineshaft-100">Policies</h3>
+          <p className="text-sm leading-3 text-mineshaft-400">Configure granular access policies</p>
+        </div>
         {isCustomRole && (
           <div className="flex items-center">
+            {isDirty && (
+              <Button
+                className="mr-4 text-mineshaft-300"
+                variant="link"
+                isDisabled={isSubmitting || !isDirty}
+                isLoading={isSubmitting}
+                onClick={() => reset()}
+              >
+                Discard
+              </Button>
+            )}
             <Button
-              colorSchema="primary"
+              colorSchema="secondary"
               type="submit"
+              className="h-10 border"
+              leftIcon={<FontAwesomeIcon icon={faSave} />}
               isDisabled={isSubmitting || !isDirty}
               isLoading={isSubmitting}
             >
               Save
             </Button>
-            <Button
-              className="ml-4 text-mineshaft-300"
-              variant="link"
-              isDisabled={isSubmitting || !isDirty}
-              isLoading={isSubmitting}
-              onClick={() => reset()}
-            >
-              Cancel
-            </Button>
           </div>
         )}
       </div>
       <div className="py-4">
         <TableContainer>
           <Table>
-            <THead>
-              <Tr>
-                <Th className="w-5" />
-                <Th>Resource</Th>
-                <Th>Permission</Th>
-              </Tr>
-            </THead>
             <TBody>
               {SIMPLE_PERMISSION_OPTIONS.map((permission) => {
                 return (
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
index af062aa13..3293554f8 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
@@ -111,6 +111,32 @@ const Page = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" sideOffset={2} className="p-1">
+                  <DropdownMenuItem
+                    onClick={() => {
+                      navigator.clipboard.writeText(data.id);
+
+                      createNotification({
+                        text: "Copied ID to clipboard",
+                        type: "info"
+                      });
+                    }}
+                    icon={<FontAwesomeIcon icon={faCopy} />}
+                  >
+                    Copy ID
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      navigator.clipboard.writeText(data.slug);
+
+                      createNotification({
+                        text: "Copied slug to clipboard",
+                        type: "info"
+                      });
+                    }}
+                    icon={<FontAwesomeIcon icon={faCopy} />}
+                  >
+                    Copy Slug
+                  </DropdownMenuItem>
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Edit}
                     a={ProjectPermissionSub.Role}
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
index c657ffd40..aa79aee69 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
@@ -124,7 +124,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   };
 
   return (
-    <div className="overflow-clip border border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md">
+    <div className="overflow-clip border border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md hover:bg-mineshaft-700">
       <div
         className="flex h-14 cursor-pointer items-center px-5 py-4 text-sm text-gray-300"
         role="button"
@@ -136,9 +136,9 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
           }
         }}
       >
-        <FontAwesomeIcon className="mr-8" icon={isOpen ? faChevronDown : faChevronRight} />
+        <FontAwesomeIcon className="mr-6 w-4" icon={isOpen ? faChevronDown : faChevronRight} />
 
-        <div className="flex-grow text-base">{title}</div>
+        <div className="flex-grow select-none text-base">{title}</div>
         {fields.length > 1 && (
           <div>
             <Tag size="xs" className="mr-2 px-2">
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
index 216d514e4..dc6323ecb 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
@@ -4,7 +4,6 @@ import { MongoAbility, MongoQuery, RawRuleOf } from "@casl/ability";
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { AccessTree } from "@app/components/permissions";
@@ -163,7 +162,7 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
                 <Button
                   colorSchema="secondary"
                   type="submit"
-                  className={twMerge("h-10 border")}
+                  className="h-10 border"
                   isDisabled={isSubmitting || !isDirty}
                   isLoading={isSubmitting}
                   leftIcon={<FontAwesomeIcon icon={faSave} />}

From 1e08b3cdc21d413cac3328e30d4c487b96eddf0c Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Wed, 16 Jul 2025 15:05:10 -0700
Subject: [PATCH 2/3] chore: remove unused export

---
 .../src/pages/organization/RoleByIDPage/components/index.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/organization/RoleByIDPage/components/index.tsx b/frontend/src/pages/organization/RoleByIDPage/components/index.tsx
index 3f57cd670..486c015ca 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/index.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/index.tsx
@@ -1,3 +1,2 @@
-export { RoleDetailsSection } from "./RoleDetailsSection";
 export { RoleModal } from "./RoleModal";
 export { RolePermissionsSection } from "./RolePermissionsSection";

From 8df53dde3b1e417e615bc36dcfa64db8bd68572a Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Thu, 17 Jul 2025 15:27:28 -0700
Subject: [PATCH 3/3] improvements: address feedback

---
 .../RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx  | 5 +----
 .../RolePermissionsSection/OrgPermissionAppConnectionRow.tsx | 5 +----
 .../RolePermissionsSection/OrgPermissionBillingRow.tsx       | 5 +----
 .../RolePermissionsSection/OrgPermissionGatewayRow.tsx       | 5 +----
 .../RolePermissionsSection/OrgPermissionGroupRow.tsx         | 5 +----
 .../RolePermissionsSection/OrgPermissionIdentityRow.tsx      | 5 +----
 .../RolePermissionsSection/OrgPermissionKmipRow.tsx          | 5 +----
 .../RolePermissionsSection/OrgPermissionSecretShareRow.tsx   | 5 +----
 .../RolePermissionsSection/OrgRoleWorkspaceRow.tsx           | 5 +----
 .../components/RolePermissionsSection/RolePermissionRow.tsx  | 5 +----
 10 files changed, 10 insertions(+), 40 deletions(-)

diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
index e9f103153..38407fd98 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAdminConsoleRow.tsx
@@ -96,10 +96,7 @@ export const OrgPermissionAdminConsoleRow = ({ isEditable, control, setValue }:
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
index 8350c3730..bce7f2403 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx
@@ -146,10 +146,7 @@ export const OrgPermissionAppConnectionRow = ({ isEditable, control, setValue }:
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
index e8dfca206..db9d5cb54 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionBillingRow.tsx
@@ -134,10 +134,7 @@ export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
index 5b1d4e341..2c94aa6b5 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx
@@ -143,10 +143,7 @@ export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
index 10f0b2cd7..5f5287847 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGroupRow.tsx
@@ -167,10 +167,7 @@ export const OrgPermissionGroupRow = ({ isEditable, control, setValue }: Props)
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
index 4fff84852..8ea639828 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionIdentityRow.tsx
@@ -177,10 +177,7 @@ export const OrgPermissionIdentityRow = ({ isEditable, control, setValue }: Prop
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
index b890bd11a..28ce55803 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionKmipRow.tsx
@@ -93,10 +93,7 @@ export const OrgPermissionKmipRow = ({ isEditable, control, setValue }: Props) =
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
index 8cd890a36..d1b6705c7 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx
@@ -90,10 +90,7 @@ export const OrgPermissionSecretShareRow = ({ isEditable, control, setValue }: P
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
index f3216b82a..2746e10bc 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgRoleWorkspaceRow.tsx
@@ -90,10 +90,7 @@ export const OrgRoleWorkspaceRow = ({ isEditable, control, setValue }: Props) =>
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {PERMISSION_ACTIONS.map(({ action, label }) => {
                 return (
diff --git a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
index 853180f1b..969024c07 100644
--- a/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx
@@ -180,10 +180,7 @@ export const RolePermissionRow = ({ isEditable, title, formName, control, setVal
       </Tr>
       {isRowExpanded && (
         <Tr>
-          <Td
-            colSpan={3}
-            className={`bg-mineshaft-900 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
-          >
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
             <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
               {getPermissionList(formName).map(({ action, label }) => {
                 return (