Resolve ui stuff

webapp/src/components/Metrics.tsx

@@ -10,7 +10,7 @@ import {
   type MetricDeclaration,
   type MetricParamMatcher,
 } from '../lib/api'
-import { CollapseToggle, PopOutButton, useSectionCollapsed } from './CollapsibleSection'
+import { CollapseToggle, PopOutButton, sectionHeaderClassName, sectionHeaderLeftClassName, useSectionCollapsed } from './CollapsibleSection'
 import { HelpIcon } from './HelpIcon'
 
 const EMPTY_MATCHER: MetricParamMatcher = { param_name: '', capture_group: '', kind: 'string' }
@@ -150,14 +150,18 @@ export function Metrics({ range }: { range: TimeRange | null }) {
   const groups = groupByLabels(bucketValues)
 
   return (
-    <div className="border-b border-border p-3 text-sm">
-      <div className="mb-2 flex items-center gap-1.5 text-xs text-text-subtle">
-        Metrics
-        <HelpIcon sectionId="metrics" label="Help: Metrics" />
-        <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
-        <PopOutButton section="metrics" range={range} />
+    <div className="border-b border-border text-sm">
+      <div className={sectionHeaderClassName}>
+        <div className={sectionHeaderLeftClassName}>
+          Metrics
+          <HelpIcon sectionId="metrics" label="Help: Metrics" />
+        </div>
+        <div className="flex items-center gap-1.5">
+          <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+          <PopOutButton section="metrics" range={range} />
+        </div>
       </div>
-      <div className="flex gap-4" hidden={collapsed}>
+      <div className="flex gap-4 p-3" hidden={collapsed}>
         <form onSubmit={handleSubmit} className="w-80 shrink-0 space-y-2">
           <div>
             <label className="mb-1 block text-xs text-text-subtle">Name</label>