From 2fe4b5ea17181465106617acbc21cbc21e9688a5 Mon Sep 17 00:00:00 2001
From: Daniel Roth <daniel_roth@hotmail.co.uk>
Date: Thu, 23 Jul 2026 15:48:50 +0000
Subject: [PATCH] style(ara-projects): let the permission detail fill the
 expanded row (#413)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the "What <contractor> may do" heading and the "Set per workstream —
Edit to change them" footnote, and span the detail table across all four
columns with no padding, so it fills the expanded space rather than sitting
inset within it. Its header row and cell padding now line up with the table
above.
---
 .../ContractorPermissionsTable.tsx            | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/app/projects/[projectId]/setup/contractors/ContractorPermissionsTable.tsx b/src/app/projects/[projectId]/setup/contractors/ContractorPermissionsTable.tsx
index 1037541d..36dd3021 100644
--- a/src/app/projects/[projectId]/setup/contractors/ContractorPermissionsTable.tsx
+++ b/src/app/projects/[projectId]/setup/contractors/ContractorPermissionsTable.tsx
@@ -390,21 +390,19 @@ export function ContractorPermissionsTable({
                         className="border-b border-gray-100 bg-gray-50/70"
                         data-testid={`contractor-permissions-${contractor.organisationId}`}
                       >
-                        <td />
-                        <td colSpan={3} className="px-4 pb-4 pt-1">
-                          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500">
-                            What {contractor.organisationName} may do
-                          </p>
-                          <table className="w-full border-collapse overflow-hidden rounded-lg border border-gray-200 bg-white">
+                        {/* Full-bleed: the detail table *is* the expanded
+                            space, spanning every column of the row above. */}
+                        <td colSpan={4} className="p-0">
+                          <table className="w-full border-collapse">
                             <thead>
-                              <tr className="border-b border-gray-200 text-xs text-gray-600">
-                                <th className="px-3 py-2 text-left font-semibold">
+                              <tr className="border-b border-gray-200 bg-gray-100/60 text-xs text-gray-600">
+                                <th className="px-4 py-2 text-left font-semibold">
                                   Workstream
                                 </th>
                                 {PERMISSION_COLUMNS.map((column) => (
                                   <th
                                     key={column.key}
-                                    className="w-32 px-3 py-2 text-left font-semibold"
+                                    className="w-40 px-4 py-2 text-left font-semibold"
                                   >
                                     {column.header}
                                   </th>
@@ -418,7 +416,7 @@ export function ContractorPermissionsTable({
                                   className="border-b border-gray-100 last:border-b-0"
                                   data-testid={`assignment-row-${assignment.id}`}
                                 >
-                                  <td className="px-3 py-2">
+                                  <td className="px-4 py-2.5">
                                     <span className="text-sm font-medium text-gray-800">
                                       {assignment.workstreamName}
                                     </span>
@@ -432,7 +430,7 @@ export function ContractorPermissionsTable({
                                     )}
                                   </td>
                                   {PERMISSION_COLUMNS.map((column) => (
-                                    <td key={column.key} className="px-3 py-2">
+                                    <td key={column.key} className="px-4 py-2.5">
                                       <PermissionState
                                         granted={assignment[column.key]}
                                         label={column.header}
@@ -446,13 +444,6 @@ export function ContractorPermissionsTable({
                               ))}
                             </tbody>
                           </table>
-                          {canManage && (
-                            <p className="mt-2 text-xs text-gray-500">
-                              Set per workstream —{" "}
-                              <span className="font-medium">Edit</span> to change
-                              them.
-                            </p>
-                          )}
                         </td>
                       </tr>
                     )}