style(ara-projects): let the permission detail fill the expanded row (#413)

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.
This commit is contained in:
Daniel Roth 2026-07-23 15:48:50 +00:00
parent 6d662e81bd
commit 2fe4b5ea17

View file

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