From acb0070f9e1b982f0657c6caf48fcf3c0bf31548 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 8 Sep 2026 21:41:49 +0800
Subject: [PATCH] fix(editor): keep wrapped classic tabs at a single-row height

---
 .../EditorGroupTabBar.groups.spec.ts          | 35 +++++++++++++++++++
 .../src/components/layout/appTabBar.css       |  2 +-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/components/layout/__tests__/EditorGroupTabBar.groups.spec.ts b/apps/desktop/src/components/layout/__tests__/EditorGroupTabBar.groups.spec.ts
index 9066e6799a..174a4d0e4b 100644
--- a/apps/desktop/src/components/layout/__tests__/EditorGroupTabBar.groups.spec.ts
+++ b/apps/desktop/src/components/layout/__tests__/EditorGroupTabBar.groups.spec.ts
@@ -320,6 +320,41 @@ describe("EditorGroupTabBar group behavior", () => {
     setActivePinia(pinia);
   });
 
+  it.each((["none", "connection"] as const).flatMap((groupMode) => (["top", "bottom"] as const).flatMap((placement) => (["wrap", "scroll"] as const).map((tabLayout) => ({ groupMode, placement, tabLayout })))))(
+    "preserves classic $placement $tabLayout row heights with $groupMode grouping in both sections",
+    async ({ groupMode, placement, tabLayout }) => {
+      const store = useQueryStore();
+      const settings = useSettingsStore();
+      settings.editorSettings.appLayout = "classic";
+      settings.editorSettings.tabLayout = tabLayout;
+      settings.editorSettings.tabGroupMode = groupMode;
+      settings.editorSettings.tabPlacement = placement;
+      for (let index = 0; index < 8; index += 1) {
+        store.createTab("pg-1", "app", `Query ${index}`, "query");
+      }
+      store.tabs[0]!.pinned = true;
+      const { app, host } = mountBar(store.focusedGroupId, store.tabs.slice(), store.activeTabId, pinia);
+      const styles = document.createElement("style");
+      styles.textContent = `html { font-size: 16px; } .h-full { height: 100%; }\n${sharedStyles}`;
+      document.head.appendChild(styles);
+
+      try {
+        await settle();
+        expect(host.querySelectorAll(".tab-section--horizontal")).toHaveLength(2);
+        const entries = host.querySelectorAll<HTMLElement>(".tab-group-entry");
+        expect(entries).toHaveLength(8);
+        for (const entry of entries) {
+          const row = tabLayout === "wrap" && groupMode !== "none" ? entry.querySelector<HTMLElement>(".tab-group-tab")! : entry;
+          expect(getComputedStyle(row).height).toBe(tabLayout === "wrap" ? "32px" : "100%");
+        }
+      } finally {
+        app.unmount();
+        host.remove();
+        styles.remove();
+      }
+    },
+  );
+
   it("renders one header per connection cluster and collapses it to a count badge", async () => {
     const store = useQueryStore();
     const settings = useSettingsStore();
diff --git a/apps/desktop/src/components/layout/appTabBar.css b/apps/desktop/src/components/layout/appTabBar.css
index 74e49e31ab..235c07bdd2 100644
--- a/apps/desktop/src/components/layout/appTabBar.css
+++ b/apps/desktop/src/components/layout/appTabBar.css
@@ -253,7 +253,7 @@
 }
 
 /* 经典布局下 h-full 在 height:auto 容器中失效，改为固定高度 */
-.app-tab-scroll.classic-wrap > div {
+.app-tab-scroll.classic-wrap .tab-group-entry {
   height: 2rem;
 }