metrics: fix spacing issues

Author: Venefilyn

pkg/metrics/metrics.jsx

@@ -605,7 +605,7 @@ class CurrentMetrics extends React.Component {
         };
 
         let name_text = (
-            <Button variant="link" isInline component="a" key={name}
+            <Button variant="link" isInline isBlock component="a" key={name}
                     onClick={() => cgroupClickHandler(name, is_user, is_container, uid)}
                     isDisabled={is_container && !podman_installed}>
                 <TableText wrapModifier="truncate">
@@ -1994,7 +1994,9 @@ export const Application = () => {
 
     return (
         <WithDialogs>
-            <Page additionalGroupedContent={
+            <Page
+            className='no-masthead-sidebar'
+            additionalGroupedContent={
                 <PageSection hasBodyWrapper={false} id="metrics-header-section" type='breadcrumb'>
                     <Flex>
                         <FlexItem>

pkg/metrics/metrics.scss

@@ -43,27 +43,19 @@ html {
 // FIXME: More styles from ct-system-overview
 .current-metrics {
   --card-width: 200px;
-  --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fit, minmax(var(--card-width), 1fr));
+  --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fit, minmax(var(--card-width), 1fr));
 
   // the cards already have padding, align the "top 5" tables with the other content
   .pf-v6-c-table {
-    --pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
-    --pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight: 0;
+    --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
 
     tr > * {
-      --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-global--spacer--xs);
-      --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-global--spacer--xs);
+      --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+      --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
     }
   }
 
   .pf-v6-c-card {
-    // Make sure the cards do not get taller than 50% of the screen
-    // ...and when they do, they should scroll
-    @media screen and (orientation: landscape) {
-      max-block-size: 50vh;
-      overflow: auto;
-    }
-
     &__title-text {
       font-size: var(--pf-v5-global--FontSize--xl);
       font-weight: var(--pf-v5-global--FontWeight--normal);
@@ -74,6 +66,13 @@ html {
       display: flex;
       flex-direction: column;
 
+      // Make sure the cards do not get taller than 50% of the screen
+      // ...and when they do, they should scroll
+      @media screen and (orientation: landscape) {
+        max-block-size: 50vh;
+        overflow: auto;
+      }
+
       // Strip the padding from the first item,
       // including table headings
       > :first-child,
@@ -109,21 +108,21 @@ html {
 
     .progress-stack {
       display: grid;
-      padding-block-end: var(--pf-v5-global--spacer--sm);
-      grid-gap: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
+      padding-block-end: var(--pf-t--global--spacer--sm);
+      grid-gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md);
 
       &:not(:first-child) {
-        padding-block-start: var(--pf-v5-global--spacer--sm);
+        padding-block-start: var(--pf-t--global--spacer--sm);
       }
     }
 
     .progress-stack-no-space {
       display: grid;
-      padding-block-end: var(--pf-v5-global--spacer--sm);
+      padding-block-end: var(--pf-t--global--spacer--sm);
       grid-gap: 0;
 
       &:not(:first-child) {
-        padding-block-start: var(--pf-v5-global--spacer--sm);
+        padding-block-start: var(--pf-t--global--spacer--sm);
       }
 
       // avoid the "x" icon on high CPU usage
@@ -166,7 +165,7 @@ html {
   // Shrink progress bars and their gap a little
   .pf-v6-c-progress {
     grid-gap: 0;
-    --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--xs);
+    --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--xs);
     // PF4 uses end; it probably should arguably use last baseline.
     // (perhaps end may work better for non-text content?)
     align-items: last baseline;
@@ -182,13 +181,17 @@ html {
     text-decoration: none;
 
     .pf-v6-c-progress__description {
-      text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
+      text-decoration: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecoration);
     }
   }
 
+  .pf-v6-c-button .pf-v6-c-button__text {
+    flex: auto;
+  }
+
   // Match font weight with description list terms
   .pf-v6-c-progress__description {
-    font-weight: var(--pf-v5-global--FontWeight--bold);
+    font-weight: var(--pf-t--global--font--weight--300);
   }
 
   // Recolor text
@@ -202,8 +205,8 @@ html {
 
   // default is way too wide for the cards
   .pf-v6-c-description-list {
-    --pf-v5-c-description-list--m-horizontal__term--width: minmax(0, auto);
-    --pf-v5-c-description-list--m-horizontal__description--width: minmax(0, auto);
+    --pf-v6-c-description-list--m-horizontal__term--width: minmax(0, auto);
+    --pf-v6-c-description-list--m-horizontal__description--width: minmax(0, auto);
   }
 
   // Don't wrap network in / out data
@@ -213,7 +216,7 @@ html {
   .network-nowrap-shrink {
     td {
       white-space: nowrap;
-      font-size: var(--pf-v5-global--FontSize--xs);
+      font-size: var(--pf-t--global--size--font--xs);
     }
   }
 
@@ -289,7 +292,7 @@ html {
 
   // Trim down the gutter space between cards
   .current-metrics.pf-v6-l-gallery.pf-m-gutter {
-    grid-gap: var(--pf-v5-global--spacer--sm);
+    grid-gap: var(--pf-t--global--spacer--sm);
   }
 
   // Shave off a few pixels from cards
@@ -474,7 +477,7 @@ $graphs: cpu, memory, disks, network;
 
     // Just embolden the top level time events
     button + time {
-      font-weight: var(--pf-v5-global--FontWeight--bold);
+      font-weight: var(--pf-t--global--font--weight--300);
     }
 
     // Make messages such as `Loading...` or `No logs found` centered