diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css
index 760fbbfad5..0e3b8aaff9 100644
--- a/front_end/elements/metricsSidebarPane.css
+++ b/front_end/elements/metricsSidebarPane.css
@@ -18,6 +18,7 @@
 
 :host {
   --metrics-height: 190px;
+
   height: var(--metrics-height);
   contain: strict;
 }
@@ -29,37 +30,6 @@
   --metrics-height: 214px;
 }
 
-/* All computed layout attributes except position have a quite light
- * background color applied to them, so the default light font in dark
- * mode is very low contrast. Therefore we swap back to a dark font by
- * default in dark mode because the background colors are lighter.
- */
-:host-context(.-theme-with-dark-background) .metrics .margin,
-:host-context(.-theme-with-dark-background) .metrics .border,
-:host-context(.-theme-with-dark-background) .metrics .padding,
-:host-context(.-theme-with-dark-background) .metrics .content {
-  color: #222;
-}
-
-/* When you hover over margin the rest of the items get given a black
- * background and so then the black text we set above means the numbers
- * are invisible. So if you're hovering over the margin we set the
- * color of the text for all the children to light. This also fixes
- * hovering over anything within margin such as border/padding.
- */
-:host-context(.-theme-with-dark-background) .metrics .margin:hover div {
-  color: #ccc;
-}
-
-/* In dark mode the hover color that is used when hovering on border
- * constrasts very poorly with the lighter text colour used in dark
- * mode. So when you hover over the border we apply a dark font color
- * that contrasts much better with the background.
- */
-:host-context(.-theme-with-dark-background) .metrics .border:hover > div:not(.padding) {
-  color: #222;
-}
-
 .metrics .label {
   position: absolute;
   font-size: 10px;
@@ -147,3 +117,34 @@
 .metrics .bottom {
   display: inline-block;
 }
+
+/* All computed layout attributes except position have a quite light
+ * background color applied to them, so the default light font in dark
+ * mode is very low contrast. Therefore we swap back to a dark font by
+ * default in dark mode because the background colors are lighter.
+ */
+:host-context(.-theme-with-dark-background) .metrics .margin,
+:host-context(.-theme-with-dark-background) .metrics .border,
+:host-context(.-theme-with-dark-background) .metrics .padding,
+:host-context(.-theme-with-dark-background) .metrics .content {
+  color: #222;
+}
+
+/* When you hover over margin the rest of the items get given a black
+ * background and so then the black text we set above means the numbers
+ * are invisible. So if you're hovering over the margin we set the
+ * color of the text for all the children to light. This also fixes
+ * hovering over anything within margin such as border/padding.
+ */
+:host-context(.-theme-with-dark-background) .metrics .margin:hover div {
+  color: #ccc;
+}
+
+/* In dark mode the hover color that is used when hovering on border
+ * constrasts very poorly with the lighter text colour used in dark
+ * mode. So when you hover over the border we apply a dark font color
+ * that contrasts much better with the background.
+ */
+:host-context(.-theme-with-dark-background) .metrics .border:hover > div:not(.padding) {
+  color: #222;
+}