diff --git a/pkg/storaged/pages.jsx b/pkg/storaged/pages.jsx
index 38946653e63..6165fee5c4e 100644
--- a/pkg/storaged/pages.jsx
+++ b/pkg/storaged/pages.jsx
@@ -609,7 +609,7 @@ export const PageTable = ({ emptyCaption, aria_label, pages, crossrefs, sorted,
         } else {
             const cols = [
                 <Td key="1" onClick={onClick}>
-                    <div className={"content-level-" + level}>
+                    <div className="indent" style={ { "--level": level } }>
                         <Truncate content={name} />
                         {info}
                     </div>
diff --git a/pkg/storaged/storage.scss b/pkg/storaged/storage.scss
index cf82fc16cc7..5970ad2b808 100644
--- a/pkg/storaged/storage.scss
+++ b/pkg/storaged/storage.scss
@@ -109,20 +109,11 @@ td.job-action {
 }
 
 // FIXME: This is visual only; it needs to be fixed for a11y reasons, likely at the JSX level
-div[class*="content-level-"] {
-  --multiplier: 0;
-  --offset: calc(var(--pf-v5-global--spacer--md) * var(--multiplier));
-
-  padding-inline-start: var(--offset);
+.indent {
+  padding-inline-start: calc(var(--pf-v5-global--spacer--md) * min(var(--level, 0), 10));
   white-space: nowrap;
 }
 
-@for $i from 1 through 10 {
-  div.content-level-#{$i} {
-    --multiplier: #{$i};
-  }
-}
-
 // FIXME: Is this used?
 a.disabled {
   color: var(--pf-v5-global--palette--light-blue-200);
diff --git a/test/reference b/test/reference
index d5a0de20d06..d5fb2c7091a 160000
--- a/test/reference
+++ b/test/reference
@@ -1 +1 @@
-Subproject commit d5a0de20d062608d3d7b83c5f208895fe4be73e1
+Subproject commit d5fb2c7091a018e38175cca99dfedbd1c4d375c3