diff --git a/ui/src/ui/views/config-form.render.ts b/ui/src/ui/views/config-form.render.ts
index dc6cebe3e36..d8c41b39904 100644
--- a/ui/src/ui/views/config-form.render.ts
+++ b/ui/src/ui/views/config-form.render.ts
@@ -435,6 +435,46 @@ export function renderConfigForm(props: ConfigFormProps) {
     `;
   }
 
+  const renderSectionCard = (params: {
+    id: string;
+    sectionKey: string;
+    label: string;
+    description: string;
+    node: JsonSchema;
+    nodeValue: unknown;
+    path: Array<string | number>;
+  }) => html`
+    <section class="config-section-card" id=${params.id}>
+      <div class="config-section-card__header">
+        <span class="config-section-card__icon">${getSectionIcon(params.sectionKey)}</span>
+        <div class="config-section-card__titles">
+          <h3 class="config-section-card__title">${params.label}</h3>
+          ${
+            params.description
+              ? html`<p class="config-section-card__desc">${params.description}</p>`
+              : nothing
+          }
+        </div>
+      </div>
+      <div class="config-section-card__content">
+        ${renderNode({
+          schema: params.node,
+          value: params.nodeValue,
+          path: params.path,
+          hints: props.uiHints,
+          unsupported,
+          disabled: props.disabled ?? false,
+          showLabel: false,
+          searchCriteria,
+          revealSensitive: props.revealSensitive ?? false,
+          isSensitivePathRevealed: props.isSensitivePathRevealed,
+          onToggleSensitivePath: props.onToggleSensitivePath,
+          onPatch: props.onPatch,
+        })}
+      </div>
+    </section>
+  `;
+
   return html`
     <div class="config-form config-form--modern">
       ${
@@ -449,38 +489,15 @@ export function renderConfigForm(props: ConfigFormProps) {
                 sectionValue && typeof sectionValue === "object"
                   ? (sectionValue as Record<string, unknown>)[subsectionKey]
                   : undefined;
-              const id = `config-section-${sectionKey}-${subsectionKey}`;
-              return html`
-              <section class="config-section-card" id=${id}>
-                <div class="config-section-card__header">
-                  <span class="config-section-card__icon">${getSectionIcon(sectionKey)}</span>
-                  <div class="config-section-card__titles">
-                    <h3 class="config-section-card__title">${label}</h3>
-                    ${
-                      description
-                        ? html`<p class="config-section-card__desc">${description}</p>`
-                        : nothing
-                    }
-                  </div>
-                </div>
-                <div class="config-section-card__content">
-                  ${renderNode({
-                    schema: node,
-                    value: scopedValue,
-                    path: [sectionKey, subsectionKey],
-                    hints: props.uiHints,
-                    unsupported,
-                    disabled: props.disabled ?? false,
-                    showLabel: false,
-                    searchCriteria,
-                    revealSensitive: props.revealSensitive ?? false,
-                    isSensitivePathRevealed: props.isSensitivePathRevealed,
-                    onToggleSensitivePath: props.onToggleSensitivePath,
-                    onPatch: props.onPatch,
-                  })}
-                </div>
-              </section>
-            `;
+              return renderSectionCard({
+                id: `config-section-${sectionKey}-${subsectionKey}`,
+                sectionKey,
+                label,
+                description,
+                node,
+                nodeValue: scopedValue,
+                path: [sectionKey, subsectionKey],
+              });
             })()
           : filteredEntries.map(([key, node]) => {
               const meta = SECTION_META[key] ?? {
@@ -488,37 +505,15 @@ export function renderConfigForm(props: ConfigFormProps) {
                 description: node.description ?? "",
               };
 
-              return html`
-              <section class="config-section-card" id="config-section-${key}">
-                <div class="config-section-card__header">
-                  <span class="config-section-card__icon">${getSectionIcon(key)}</span>
-                  <div class="config-section-card__titles">
-                    <h3 class="config-section-card__title">${meta.label}</h3>
-                    ${
-                      meta.description
-                        ? html`<p class="config-section-card__desc">${meta.description}</p>`
-                        : nothing
-                    }
-                  </div>
-                </div>
-                <div class="config-section-card__content">
-                  ${renderNode({
-                    schema: node,
-                    value: value[key],
-                    path: [key],
-                    hints: props.uiHints,
-                    unsupported,
-                    disabled: props.disabled ?? false,
-                    showLabel: false,
-                    searchCriteria,
-                    revealSensitive: props.revealSensitive ?? false,
-                    isSensitivePathRevealed: props.isSensitivePathRevealed,
-                    onToggleSensitivePath: props.onToggleSensitivePath,
-                    onPatch: props.onPatch,
-                  })}
-                </div>
-              </section>
-            `;
+              return renderSectionCard({
+                id: `config-section-${key}`,
+                sectionKey: key,
+                label: meta.label,
+                description: meta.description,
+                node,
+                nodeValue: value[key],
+                path: [key],
+              });
             })
       }
     </div>