[RPP] Adjust spacing in insights to match mocks Also changes metric order to match PSI, which is LCP INP CLS. Bug: 372266302 Change-Id: I907d9a710f7ef11cfcc8e366ebed243676b83c8a Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5922146 Reviewed-by: Paul Irish <paulirish@chromium.org> Commit-Queue: Connor Clark <cjamcl@chromium.org>

diff --git a/front_end/panels/timeline/components/SidebarSingleInsightSet.ts b/front_end/panels/timeline/components/SidebarSingleInsightSet.ts
index 6ecc5f7..ea151f2 100644
--- a/front_end/panels/timeline/components/SidebarSingleInsightSet.ts
+++ b/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -173,16 +173,16 @@
                   lcp.event ?? null) :
               LitHtml.nothing}
     ${
-        this.#renderMetricValue(
-            'CLS', cls.value.toFixed(2),
-            Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value),
-            cls.worstShiftEvent)}
-    ${
         inp ? this.#renderMetricValue(
                   'INP', i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(inp.value),
                   Trace.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(inp.value),
                   inp.event) :
               LitHtml.nothing}
+    ${
+        this.#renderMetricValue(
+            'CLS', cls.value.toFixed(2),
+            Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value),
+            cls.worstShiftEvent)}
     </div>
     `;
   }

diff --git a/front_end/panels/timeline/components/insights/sidebarInsight.css b/front_end/panels/timeline/components/insights/sidebarInsight.css
index adb8c25..bf92044 100644
--- a/front_end/panels/timeline/components/insights/sidebarInsight.css
+++ b/front_end/panels/timeline/components/insights/sidebarInsight.css

@@ -36,6 +36,12 @@
       font: var(--sys-typescale-body4-medium);
     }
   }
+
+  &:not(.closed) {
+    header {
+      padding-bottom: var(--sys-size-2);
+    }
+  }
 }
 
 .insight-hover-icon {
@@ -78,7 +84,7 @@
 }
 
 .insight-section {
-  padding: var(--sys-size-5) 0;
+  padding-top: var(--sys-size-5);
 }
 
 .insight-description:not(:empty) {

diff --git a/front_end/panels/timeline/components/sidebarInsightsTab.css b/front_end/panels/timeline/components/sidebarInsightsTab.css
index bc83a78..62eeb23 100644
--- a/front_end/panels/timeline/components/sidebarInsightsTab.css
+++ b/front_end/panels/timeline/components/sidebarInsightsTab.css

@@ -14,7 +14,6 @@
   display: flex;
   flex-flow: column nowrap;
   flex-grow: 1; /* so it fills the available vertical height in the sidebar */
-  margin-top: var(--sys-size-6);
 
   details {
     flex-grow: 0;

diff --git a/front_end/panels/timeline/components/sidebarSingleInsightSet.css b/front_end/panels/timeline/components/sidebarSingleInsightSet.css
index a2ef1a1..c8d754f 100644
--- a/front_end/panels/timeline/components/sidebarSingleInsightSet.css
+++ b/front_end/panels/timeline/components/sidebarSingleInsightSet.css

@@ -28,7 +28,7 @@
 }
 
 .metric-value {
-  font-size: 20px;
+  font-size: var(--sys-size-11);
 }
 
 .metric-value-bad {
@@ -48,6 +48,5 @@
 }
 
 .metric-label {
-  font-size: 12px;
-  font-weight: bold;
+  font: var(--sys-typescale-body4-medium);
 }