fix monitoring settings layout spacing

Author: pallyoung

packages/web/src/styles/components.css

@@ -997,6 +997,11 @@
   padding: var(--sp-4);
 }
 
+.settings-content--fill-height > .settings-content-surface--monitoring-dense {
+  flex: 0 0 auto;
+  min-height: 100%;
+}
+
 .settings-section {
   max-width: 720px;
   min-width: 0;
@@ -1675,6 +1680,11 @@
   padding: var(--sp-3);
 }
 
+.monitoring-tree,
+.monitoring-detail {
+  padding: var(--sp-3);
+}
+
 .monitoring-card__header {
   display: flex;
   align-items: flex-start;
@@ -16504,7 +16514,7 @@ body.is-dragging-pane .session-action-btn-drag {
 .workspace-search-panel__details--collapsed {
   min-height: 23px;
   align-items: center;
-  justify-items: start;
+  justify-items: end;
 }
 
 .workspace-search-panel__details--collapsed .workspace-search-panel__filter--details {

packages/web/src/styles/components.theme.test.ts

@@ -3398,7 +3398,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(searchFilterDetails).toContain("background: transparent");
     expect(searchInlineIcon).toContain("width: 11px");
     expect(searchDetails).toContain("justify-items: stretch");
-    expect(searchDetailsCollapsed).toContain("justify-items: start");
+    expect(searchDetailsCollapsed).toContain("justify-items: end");
     expect(searchDetailsCollapsed).toContain("align-items: center");
     expect(searchDetailHeading).toContain("justify-content: space-between");
     expect(searchDetailHeading).toContain("width: 100%");

packages/web/src/styles/monitoring.guard.test.ts

@@ -11,6 +11,15 @@ const rawMonitoringFontSizePattern =
 const rawMonitoringRadiusPattern =
   /border-radius:\s*(?:\d+px|999px|9999px|\d+%|calc\([^)]*\d+px[^)]*\))/;
 
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function getRuleBlock(selector: string) {
+  const pattern = new RegExp(`${escapeRegExp(selector)}\\s*\\{([^}]*)\\}`);
+  return componentsStyles.match(pattern)?.[1] ?? "";
+}
+
 function getMonitoringOffenderBlocks(pattern: RegExp) {
   return Array.from(componentsStyles.matchAll(/([^{}]+)\{([^}]*)\}/g))
     .map((match) => ({
@@ -36,4 +45,19 @@ describe("monitoring style guardrails", () => {
     expect(componentsStyles).toMatch(rawMonitoringRadiusPattern);
     expect(getMonitoringOffenderBlocks(rawMonitoringRadiusPattern)).toEqual([]);
   });
+
+  it("lets the dense settings monitoring surface grow with dashboard content", () => {
+    const denseFillHeightRule = getRuleBlock(
+      ".settings-content--fill-height > .settings-content-surface--monitoring-dense"
+    );
+
+    expect(denseFillHeightRule).toContain("flex: 0 0 auto");
+    expect(denseFillHeightRule).toContain("min-height: 100%");
+  });
+
+  it("keeps monitoring data panels padded away from their borders", () => {
+    const panelRule = getRuleBlock(".monitoring-tree,\n.monitoring-detail");
+
+    expect(panelRule).toContain("padding: var(--sp-3)");
+  });
 });