Resolve ui stuff

webapp/src/components/Params.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { ApiError, declareParam, type ParamDeclaration } from '../lib/api'
-import { CollapseToggle, PopOutButton, useSectionCollapsed } from './CollapsibleSection'
+import { CollapseToggle, PopOutButton, sectionHeaderClassName, sectionHeaderLeftClassName, useSectionCollapsed } from './CollapsibleSection'
 import { HelpIcon } from './HelpIcon'
 
 const EMPTY_KIND: ParamDeclaration['kind'] = 'string'
@@ -33,14 +33,18 @@ export function Params({ params, onDeclared }: { params: ParamDeclaration[]; onD
   }
 
   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">
-        Params
-        <HelpIcon sectionId="parameters" label="Help: Params" />
-        <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
-        <PopOutButton section="params" />
+    <div className="border-b border-border text-sm">
+      <div className={sectionHeaderClassName}>
+        <div className={sectionHeaderLeftClassName}>
+          Params
+          <HelpIcon sectionId="parameters" label="Help: Params" />
+        </div>
+        <div className="flex items-center gap-1.5">
+          <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+          <PopOutButton section="params" />
+        </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>