Fix mobile agent configuration layout

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/AgentConfigForm.render.test.tsx

@@ -398,12 +398,18 @@ describe("AgentConfigForm environment selector", () => {
 
     expect(result.container.textContent).toContain("Advanced runtime");
     expect(result.container.textContent).toContain("runtime adapter fields");
-    expect(runtime?.compareDocumentPosition(environment as Node) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect((runtime?.compareDocumentPosition(environment as Node) ?? 0) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
     expect(runtime?.textContent).not.toContain("Environment variables");
     expect(runtime?.textContent).not.toContain("Working directory (deprecated)");
     expect(environment?.parentElement?.textContent).toContain("Environment variables");
     expect(danger?.textContent).toContain("danger adapter fields");
     expect(danger?.textContent).toContain("Working directory (deprecated)");
+    expect([...result.container.querySelectorAll("h2")].map((heading) => heading.textContent?.trim())).toEqual([
+      "Runtime",
+      "Environment",
+      "Schedule & Runs",
+      "Danger & Legacy",
+    ]);
   });
 
   it("keeps an existing non-runnable override visible so it can be cleared", async () => {

ui/src/components/AgentConfigForm.tsx

@@ -968,6 +968,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
     MAX_TURN_CONTINUATION_MAX_DELAY_SEC,
   );
   const configurationShell = props.configurationShell === true;
+  const CardSectionHeading = configurationShell ? "h2" : "h3";
   const sectionVisible = (section: string) =>
     !props.identityOnly && (!props.visibleConfigurationSections || props.visibleConfigurationSections.has(section));
   const advancedRuntimeKeys = [
@@ -1100,7 +1101,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
       {sectionVisible("runtime") && <div id={configurationShell ? "config-runtime" : undefined} className={cn(!cards && (isCreate ? "border-t border-border" : "border-b border-border"), configurationShell && "scroll-mt-24")}>
         <div className={cn(cards ? "flex items-center justify-between mb-3" : "px-4 py-2 flex items-center justify-between gap-2")}>
           {cards
-            ? <h3 className="text-sm font-medium">{configurationShell ? "Runtime" : "Adapter"}</h3>
+            ? <CardSectionHeading className="text-sm font-medium">{configurationShell ? "Runtime" : "Adapter"}</CardSectionHeading>
             : <span className="text-xs font-medium text-muted-foreground">Adapter</span>
           }
           {showInlineAdapterTestEnvironmentButton && (
@@ -1480,7 +1481,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
         // Render the environment read-only instead of the selectable picker.
         <div className={cn(!cards && (isCreate ? "border-t border-border" : "border-b border-border"))}>
           {cards
-            ? <h3 className="text-sm font-medium mb-3">Environment</h3>
+            ? <CardSectionHeading className="text-sm font-medium mb-3">Environment</CardSectionHeading>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Environment</div>
           }
           <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
@@ -1505,7 +1506,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
       ) : showEnvironmentOverrideControl ? (
         <div className={cn(!cards && (isCreate ? "border-t border-border" : "border-b border-border"))}>
           {cards
-            ? <h3 className="text-sm font-medium mb-3">Environment</h3>
+            ? <CardSectionHeading className="text-sm font-medium mb-3">Environment</CardSectionHeading>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground">Environment</div>
           }
           <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
@@ -1572,7 +1573,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
       {sectionVisible("schedule") && (isCreate && showCreateRunPolicySection ? (
         <div id={configurationShell ? "config-schedule" : undefined} className={cn(!cards && "border-b border-border", configurationShell && "scroll-mt-24")}>
           {cards
-            ? <h3 className="text-sm font-medium flex items-center gap-2 mb-3"><Heart className="h-3 w-3" /> {configurationShell ? "Schedule & Runs" : "Run Policy"}</h3>
+            ? <CardSectionHeading className="text-sm font-medium flex items-center gap-2 mb-3"><Heart className="h-3 w-3" /> {configurationShell ? "Schedule & Runs" : "Run Policy"}</CardSectionHeading>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground flex items-center gap-2"><Heart className="h-3 w-3" /> Run Policy</div>
           }
           <div className={cn(cards ? "border border-border rounded-lg p-4 space-y-3" : "px-4 pb-3 space-y-3")}>
@@ -1593,7 +1594,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
       ) : !isCreate ? (
         <div id={configurationShell ? "config-schedule" : undefined} className={cn(!cards && "border-b border-border", configurationShell && "scroll-mt-24")}>
           {cards
-            ? <h3 className="text-sm font-medium flex items-center gap-2 mb-3"><Heart className="h-3 w-3" /> {configurationShell ? "Schedule & Runs" : "Run Policy"}</h3>
+            ? <CardSectionHeading className="text-sm font-medium flex items-center gap-2 mb-3"><Heart className="h-3 w-3" /> {configurationShell ? "Schedule & Runs" : "Run Policy"}</CardSectionHeading>
             : <div className="px-4 py-2 text-xs font-medium text-muted-foreground flex items-center gap-2"><Heart className="h-3 w-3" /> Run Policy</div>
           }
           <div className={cn(cards ? "border border-border rounded-lg overflow-hidden" : "")}>
@@ -1696,7 +1697,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
 
       {configurationShell && sectionVisible("danger") && (
         <div id="config-danger" className="scroll-mt-24">
-          <h3 className="text-sm font-medium mb-3">Danger &amp; Legacy</h3>
+          <CardSectionHeading className="text-sm font-medium mb-3">Danger &amp; Legacy</CardSectionHeading>
           <div className="border border-border rounded-lg p-4 space-y-3">
             {hasAdapterDangerFields ? (
               <uiAdapter.ConfigFields {...adapterFieldProps} configurationSection="danger" />

ui/src/components/agent-configuration-shell.tsx

@@ -102,7 +102,7 @@ export function AgentConfigurationRail({
   const shown = agentConfigurationSections.filter((section) => visibleSections.has(section.id));
   return (
     <>
-      <div className="sticky top-0 z-20 bg-background py-2 md:hidden">
+      <div className="sticky top-0 z-20 min-w-0 max-w-full bg-background py-2 md:hidden">
         <label className="mb-2 flex items-center gap-2 rounded-md border border-border px-2.5 py-2">
           <Search className="h-3.5 w-3.5 text-muted-foreground" />
           <input
@@ -120,7 +120,7 @@ export function AgentConfigurationRail({
           {shown.map((section) => <option key={section.id} value={section.id}>{section.label}</option>)}
         </select>
       </div>
-      <aside className="sticky top-4 hidden self-start md:block">
+      <aside className="sticky top-4 hidden min-w-0 self-start md:block">
         <label className="flex items-center gap-2 rounded-md border border-border px-2.5 py-2">
           <Search className="h-3.5 w-3.5 text-muted-foreground" />
           <input

ui/src/pages/AgentDetail.tsx

@@ -1782,16 +1782,16 @@ function AgentConfigurePage({
   const effectiveChips = buildEffectiveConfigurationChips(effectiveConfig);
 
   return (
-    <div className="space-y-5">
+    <div className="min-w-0 max-w-full space-y-5">
       <EffectiveConfigurationStrip chips={effectiveChips} />
-      <div className="grid gap-6 md:grid-cols-(--gtc-agent-configuration)">
+      <div className="grid min-w-0 max-w-full gap-6 md:grid-cols-(--gtc-agent-configuration)">
         <AgentConfigurationRail
           query={filterQuery}
           onQueryChange={setFilterQuery}
           visibleSections={visibleSections}
           dirtySections={new Set(dirtyDetails.sections)}
         />
-        <div className="max-w-3xl space-y-8">
+        <div className="min-w-0 w-full max-w-3xl space-y-8">
           <ConfigurationTab
         agent={agent}
         onDirtyChange={onDirtyChange}