From ed8726777722fe8bbcc74229bdd4f07c2df31cb3 Mon Sep 17 00:00:00 2001
From: Melody Ruch <396921921@qq.com>
Date: Sat, 15 Aug 2026 23:29:54 +0800
Subject: [PATCH] fix(redis): keep JSON tree labels horizontal

---
 .../src/components/common/JsonTree.vue        | 20 +++++++++++++++++++
 packages/app-tests/jsonTreeLayout.test.ts     | 10 ++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 packages/app-tests/jsonTreeLayout.test.ts

diff --git a/apps/desktop/src/components/common/JsonTree.vue b/apps/desktop/src/components/common/JsonTree.vue
index a17618d976..c881c94192 100644
--- a/apps/desktop/src/components/common/JsonTree.vue
+++ b/apps/desktop/src/components/common/JsonTree.vue
@@ -307,6 +307,26 @@ defineExpose({ expandAll, collapseAll, resetExpansion, refresh });
   font-weight: 650;
 }
 
+.json-tree-key,
+.json-tree-index,
+.json-tree-punctuation,
+.json-tree-bracket {
+  flex: 0 0 auto;
+}
+
+.json-tree-string,
+.json-tree-number,
+.json-tree-boolean,
+.json-tree-null {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.json-tree-summary {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
 .dark .json-tree {
   --json-tree-key: #93c5fd;
   --json-tree-string: #86efac;
diff --git a/packages/app-tests/jsonTreeLayout.test.ts b/packages/app-tests/jsonTreeLayout.test.ts
new file mode 100644
index 0000000000..c956fcbb61
--- /dev/null
+++ b/packages/app-tests/jsonTreeLayout.test.ts
@@ -0,0 +1,10 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync("apps/desktop/src/components/common/JsonTree.vue", "utf8");
+
+describe("JSON tree layout", () => {
+  it("keeps a collapsed container closing bracket beside its summary", () => {
+    expect(source).toMatch(/\.json-tree-summary\s*\{\s*flex: 0 1 auto;\s*min-width: 0;\s*\}/);
+  });
+});