fix(frontend): prevent catalog header overlap

frontend/e2e/database-management-layout.spec.ts

@@ -603,18 +603,28 @@ test("context panels stay inside the manager and the Tables grid sits in a sideb
       const rect = node.getBoundingClientRect();
       return rect.top + rect.height / 2;
     };
+    const verticalBounds = (node: Element) => {
+      const rect = node.getBoundingClientRect();
+      return { top: rect.top, bottom: rect.bottom };
+    };
     return {
       backgroundImage: getComputedStyle(element).backgroundImage,
       height: element.getBoundingClientRect().height,
-      centers: [centerY(title), centerY(status), centerY(actions)],
+      primaryCenters: [centerY(title), centerY(actions)],
+      heading: verticalBounds(title),
+      status: verticalBounds(status),
+      actions: verticalBounds(actions),
     };
   });
 
   expect(applicationBarLayout.backgroundImage).toBe("none");
-  expect(applicationBarLayout.height).toBeLessThanOrEqual(72);
+  expect(applicationBarLayout.height).toBeLessThanOrEqual(104);
   expect(
-    Math.max(...applicationBarLayout.centers) - Math.min(...applicationBarLayout.centers),
+    Math.max(...applicationBarLayout.primaryCenters) - Math.min(...applicationBarLayout.primaryCenters),
   ).toBeLessThanOrEqual(1);
+  expect(applicationBarLayout.status.top).toBeGreaterThanOrEqual(
+    Math.max(applicationBarLayout.heading.bottom, applicationBarLayout.actions.bottom) + 8,
+  );
 
   await expect(page.getByRole("row", { name: /patients/ })).toBeVisible();