From 44a58a183f41ab8015aebc66003e893aab0f1375 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Mon, 23 Mar 2026 14:35:24 +0000
Subject: [PATCH] Prioritize drawer change history layout

---
 .../internal/subsystems/unified-resources.md  |  4 ++++
 .../ResourceDetailDrawerOverviewTab.tsx       | 19 +++++++++++++++++--
 .../ResourceDetailDrawer.history.test.tsx     |  7 +++++--
 ...urceDetailDrawer.identity-runtime.test.tsx |  7 +++++--
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/docs/release-control/v6/internal/subsystems/unified-resources.md b/docs/release-control/v6/internal/subsystems/unified-resources.md
index 745864fd1..b5bcef20c 100644
--- a/docs/release-control/v6/internal/subsystems/unified-resources.md
+++ b/docs/release-control/v6/internal/subsystems/unified-resources.md
@@ -463,6 +463,10 @@ The overview keeps access, host, service, and investigation detail as
 collapsed sibling disclosures under the primary card pair, so the drawer keeps
 the top-level shape to current-state/identity plus `Change history` before any
 secondary operational context appears.
+That secondary hierarchy now renders in two layers: a full-width `Change
+history` surface first, followed by a separate support-disclosure grid for
+access, host, service, and context, so timeline inspection stays visually
+primary instead of competing with the support cards for equal width.
 Inside `Change history`, the event list now renders directly in the parent
 section instead of inside a second bordered `Event log` card, so the timeline
 reads like one inspection surface rather than a card nested under its own
diff --git a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx
index fcef19908..729da05a4 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx
@@ -262,11 +262,11 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
 
       <div
         data-testid="resource-secondary-sections"
-        class="flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(50%-0.375rem)] [&>*]:min-w-[260px] [&>*]:max-w-full [&>*]:overflow-hidden"
+        class="space-y-3"
       >
         <div
           data-testid="resource-change-history-section"
-          class="h-full rounded border border-border bg-surface p-3 shadow-sm"
+          class="w-full rounded border border-border bg-surface p-3 shadow-sm"
         >
           <div class="flex items-center justify-between gap-3">
             <div>
@@ -507,6 +507,19 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
           </Show>
         </div>
 
+        <Show
+          when={
+            drawer.hasServiceDetails() ||
+            drawer.hasHostDetails() ||
+            drawer.hasAccessContext() ||
+            drawer.hasInvestigationContext()
+          }
+        >
+          <div
+            data-testid="resource-support-sections"
+            class="flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(50%-0.375rem)] [&>*]:min-w-[260px] [&>*]:max-w-full [&>*]:overflow-hidden"
+          >
+
         <Show when={drawer.hasServiceDetails()}>
           <SupportDisclosure
             title="Service"
@@ -1140,6 +1153,8 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
             </Show>
           </SupportDisclosure>
         </Show>
+          </div>
+        </Show>
       </div>
     </div>
   );
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx
index 1978d7574..115494eb6 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx
+++ b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx
@@ -302,8 +302,11 @@ describe('ResourceDetailDrawer change history section', () => {
     expect(screen.getByText('Current state')).toBeInTheDocument();
     expect(screen.queryByText('Runtime')).toBeNull();
     expect(screen.getByText('Change history')).toBeInTheDocument();
-    expect(screen.getByTestId('resource-secondary-sections').classList.contains('flex')).toBe(true);
-    expect(screen.getByTestId('resource-secondary-sections').classList.contains('flex-wrap')).toBe(
+    expect(screen.getByTestId('resource-secondary-sections').classList.contains('space-y-3')).toBe(
+      true,
+    );
+    expect(screen.getByTestId('resource-support-sections').classList.contains('flex')).toBe(true);
+    expect(screen.getByTestId('resource-support-sections').classList.contains('flex-wrap')).toBe(
       true,
     );
     expect(
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx
index ff1b819de..0715bdca8 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx
+++ b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx
@@ -228,9 +228,12 @@ describe('ResourceDetailDrawer runtime and identity cards', () => {
     await waitFor(() => {
       expect(getByText('Hardware')).toBeInTheDocument();
     });
-    expect(getByTestId('resource-secondary-sections').classList.contains('flex')).toBe(true);
+    expect(getByTestId('resource-secondary-sections').classList.contains('space-y-3')).toBe(true);
     expect(
-      getByTestId('resource-secondary-sections').classList.contains('flex-wrap'),
+      getByTestId('resource-support-sections').classList.contains('flex'),
+    ).toBe(true);
+    expect(
+      getByTestId('resource-support-sections').classList.contains('flex-wrap'),
     ).toBe(true);
     expect(getByTestId('resource-host-details-section').querySelector('.mt-3.flex.flex-wrap')).toBeTruthy();
     expect(