diff --git a/web/src/settings.ts b/web/src/settings.ts
index 7abd344..2bfd61a 100644
--- a/web/src/settings.ts
+++ b/web/src/settings.ts
@@ -824,19 +824,14 @@ export function settingsMain(views: { hide: () => void }[], goHome: () => void):
     const timeout = numberControl(settings.remote_command_timeout_seconds);
     grid.append(field("remote command timeout (s)", timeout));
 
-    // #220: only meaningful when this build compiled the backend in, and the
-    // engine list is exactly that fact. Placeholders carry the two things
-    // the labels cannot: that the base URL is optional, and what a local one
-    // looks like.
     const hasOpenAi = settings.available_engines.includes("openai");
     const openAiBaseUrl = textControl(
       settings.openai_base_url ?? "",
       "optional — e.g. http://127.0.0.1:8080/v1",
     );
     const openAiModel = textControl(settings.openai_model ?? "", "optional — e.g. gpt-4o-mini");
-    if (hasOpenAi) {
-      grid.append(field("openai base url", openAiBaseUrl), field("openai model", openAiModel));
-    }
+    openAiBaseUrl.setAttribute("aria-label", "openai base url");
+    openAiModel.setAttribute("aria-label", "openai model");
 
     panel.append(grid);
     if (!hasEngines) {
@@ -849,6 +844,17 @@ export function settingsMain(views: { hide: () => void }[], goHome: () => void):
       );
     }
 
+    // Their own labelled row rather than two more cells in the grid above:
+    // paired, they belong to one engine, and a base URL needs the width.
+    if (hasOpenAi) {
+      panel.append(
+        el("p", "field-label readout dim", "openai-compatible endpoint — blank means its default"),
+      );
+      const openAiGrid = el("div", "form-grid");
+      openAiGrid.append(field("base url", openAiBaseUrl), field("model", openAiModel));
+      panel.append(openAiGrid);
+    }
+
     const translatorInputs: Record<string, HTMLInputElement> = {};
     if (hasEngines) {
       panel.append(el("p", "field-label readout dim", "translator daily budgets"));