Restore summary column boundaries

This commit is contained in:
rcourtman
2026-03-20 10:16:59 +00:00
parent e0dd316eb6
commit 7220839ca6
3 changed files with 17 additions and 2 deletions
@@ -271,6 +271,9 @@ read as one first-screen answer rather than two adjacent mini-surfaces.
That summary shell now reads as one linear current-state and identity column
with a responsive two-column grid on wider screens, so the first read stays
compact without making the operator scan a stack of nested cards.
Each summary column keeps its own bordered card boundary, so the split read
still has a clear visual container on both sides instead of feeling like loose
label groups.
The drawer header now stays focused on canonical identity and source/type
badges only, while workload/service drill-down links and Kubernetes platform
signals live with the summary shell, so the top strip does not compete with
@@ -915,7 +915,10 @@ const DrawerContent: Component<ResourceDetailDrawerProps> = (props) => {
Summary
</div>
<div class="mt-3 grid gap-4 sm:grid-cols-2">
<div data-testid="resource-current-state-section">
<div
data-testid="resource-current-state-section"
class="rounded border border-border bg-surface-hover p-3"
>
<div class="mb-2 text-[10px] font-medium uppercase tracking-wide text-base-content">
Current state
</div>
@@ -1104,7 +1107,10 @@ const DrawerContent: Component<ResourceDetailDrawerProps> = (props) => {
</div>
</div>
<div data-testid="resource-identity-section">
<div
data-testid="resource-identity-section"
class="rounded border border-border bg-surface-hover p-3"
>
<div class="mb-2 text-[10px] font-medium uppercase tracking-wide text-base-content">
Identity
</div>
@@ -198,6 +198,12 @@ describe('ResourceDetailDrawer change history section', () => {
const summarySection = screen.getByTestId('resource-summary-section');
expect(summarySection.querySelector('.mt-3.grid.gap-4')).toBeTruthy();
expect(summarySection.querySelector('.mt-3.grid.gap-4')?.classList.contains('sm:grid-cols-2')).toBe(true);
expect(screen.getByTestId('resource-current-state-section').classList.contains('rounded')).toBe(
true,
);
expect(screen.getByTestId('resource-identity-section').classList.contains('rounded')).toBe(
true,
);
expect(
screen.getByTestId('resource-change-history-section').querySelector('.mt-3.grid.gap-2'),
).toBeNull();