From a6d03f357734bd833ef788cd442a97bb93eff6f4 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Thu, 20 Aug 2026 11:36:09 +0800
Subject: [PATCH] fix(connection): correct MongoDB OIDC form layout

---
 .../src/components/connection/ConnectionDialog.vue    |  9 ++++++---
 .../connection/mongodbOidcConnectionDialog.spec.ts    | 11 +++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 apps/desktop/src/lib/__tests__/connection/mongodbOidcConnectionDialog.spec.ts

diff --git a/apps/desktop/src/components/connection/ConnectionDialog.vue b/apps/desktop/src/components/connection/ConnectionDialog.vue
index ffbfab8e26..bedc16cb4a 100644
--- a/apps/desktop/src/components/connection/ConnectionDialog.vue
+++ b/apps/desktop/src/components/connection/ConnectionDialog.vue
@@ -6964,9 +6964,12 @@ function openExternalUrl(url: string) {
                         </SelectContent>
                       </Select>
                     </div>
-                    <p v-if="mongoAuthMechanism === 'MONGODB-OIDC'" class="col-start-2 col-span-3 text-xs text-muted-foreground">
-                      {{ t("connection.oidcBrowserAuthHint") }}
-                    </p>
+                    <div v-if="mongoAuthMechanism === 'MONGODB-OIDC'" class="grid grid-cols-4 items-start gap-4">
+                      <span />
+                      <p class="col-span-3 text-xs text-muted-foreground">
+                        {{ t("connection.oidcBrowserAuthHint") }}
+                      </p>
+                    </div>
                     <div class="grid grid-cols-4 items-center gap-4">
                       <Label :class="connectionLabelClass">{{ t("connection.urlParams") }}</Label>
                       <Input v-model="form.url_params" class="col-span-3" placeholder="replicaSet=rs0&authSource=admin" />
diff --git a/apps/desktop/src/lib/__tests__/connection/mongodbOidcConnectionDialog.spec.ts b/apps/desktop/src/lib/__tests__/connection/mongodbOidcConnectionDialog.spec.ts
new file mode 100644
index 0000000000..fc519656c1
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/connection/mongodbOidcConnectionDialog.spec.ts
@@ -0,0 +1,11 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const dialogSource = readFileSync(new URL("../../../components/connection/ConnectionDialog.vue", import.meta.url), "utf8");
+
+describe("MongoDB OIDC connection form", () => {
+  it("keeps the browser authentication hint inside a complete form row", () => {
+    expect(dialogSource).toContain(`<div v-if="mongoAuthMechanism === 'MONGODB-OIDC'" class="grid grid-cols-4 items-start gap-4">`);
+    expect(dialogSource).not.toContain(`<p v-if="mongoAuthMechanism === 'MONGODB-OIDC'" class="col-start-2 col-span-3`);
+  });
+});