Repository: cockpit-project/cockpit (language: javascript)

Issue:
PF6: Metrics layout is odd
### Explain what happens

The metrics layout is weird.

![Image](https://github.com/user-attachments/assets/9d085359-9db5-443a-a02f-ea262a86b6f4)

![Image](https://github.com/user-attachments/assets/9486dea0-a18e-4e00-9d6c-a3de6f077c4d)

![Image](https://github.com/user-attachments/assets/2e3804c2-efd1-4c91-b8eb-1d366082ba12)

Is this because of improper nesting in the layout? Should the section and empty state be in the main group, right after the header section?

### Version of Cockpit

_No response_

### Where is the problem in Cockpit?

None

### Server operating system

None

### Server operating system version

_No response_

### What browsers are you using?

_No response_

### System log

```shell

```


Discussion / hints:

Fix patch:
diff --git a/pkg/metrics/metrics.jsx b/pkg/metrics/metrics.jsx
index 8b6ca794a46d..e1eda07528af 100644
--- a/pkg/metrics/metrics.jsx
+++ b/pkg/metrics/metrics.jsx
@@ -31,7 +31,7 @@ import { Icon } from "@patternfly/react-core/dist/esm/components/Icon/index.js";
 import {
     Modal
 } from '@patternfly/react-core/dist/esm/deprecated/components/Modal/index.js';
-import { Page, PageGroup, PageSection, } from "@patternfly/react-core/dist/esm/components/Page/index.js";
+import { Page, PageGroup, PageSection, PageBreadcrumb } from "@patternfly/react-core/dist/esm/components/Page/index.js";
 import { Popover } from "@patternfly/react-core/dist/esm/components/Popover/index.js";
 import { Progress, ProgressVariant } from "@patternfly/react-core/dist/esm/components/Progress/index.js";
 import { Stack, StackItem } from "@patternfly/react-core/dist/esm/layouts/Stack/index.js";
@@ -1994,10 +1994,12 @@ export const Application = () => {
 
     return (
         <WithDialogs>
-            <Page
-            className='no-masthead-sidebar'
-            additionalGroupedContent={
-                <PageSection hasBodyWrapper={false} id="metrics-header-section" type='breadcrumb'>
+            <Page className='no-masthead-sidebar'>
+                <PageBreadcrumb
+                    id='metrics-header-section'
+                    hasBodyWrapper={false}
+                    stickyOnBreakpoint={{ default: "top" }}
+                >
                     <Flex>
                         <FlexItem>
                             <Breadcrumb>
@@ -2010,8 +2012,7 @@ export const Application = () => {
                                              firewalldRequest={setFirewalldRequest} />
                         </FlexItem>
                     </Flex>
-                </PageSection>
-            }>
+                </PageBreadcrumb>
                 { firewalldRequest &&
                 <FirewalldRequest service={firewalldRequest.service} title={firewalldRequest.title} pageSection /> }
                 <PageSection hasBodyWrapper={false}>


Test patch: