From 7951405efb7c30219ee685a413f80adaab8d0ff2 Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Mon, 26 Oct 2026 19:30:01 +0000
Subject: [PATCH] fix(logs): wrap long values in the source details json view
 (#15694)

Co-authored-by: Ashish Kolhe <35160958+oasisk@users.noreply.github.com>
---
 web/src/plugins/logs/JsonPreview.spec.ts | 5 +++++
 web/src/plugins/logs/JsonPreview.vue     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/plugins/logs/JsonPreview.spec.ts b/web/src/plugins/logs/JsonPreview.spec.ts
index 4a4310f908..7dcc5c4b11 100644
--- a/web/src/plugins/logs/JsonPreview.spec.ts
+++ b/web/src/plugins/logs/JsonPreview.spec.ts
@@ -252,6 +252,11 @@ describe("JsonPreview Component", () => {
       expect(wrapper.exists()).toBe(true);
     });
 
+    it("should let a field's value shrink so long values wrap inside the row", () => {
+      const valueCell = wrapper.find('[data-test="log-expand-detail-key-field1"]');
+      expect(valueCell.classes()).toContain("min-w-0");
+    });
+
     it("should have correct component name", () => {
       expect(wrapper.vm.$options.name).toBe("JsonPreview");
     });
diff --git a/web/src/plugins/logs/JsonPreview.vue b/web/src/plugins/logs/JsonPreview.vue
index aa6a4a29c9..ac76ff7ab7 100644
--- a/web/src/plugins/logs/JsonPreview.vue
+++ b/web/src/plugins/logs/JsonPreview.vue
@@ -172,7 +172,7 @@
           </ODropdownItem>
         </ODropdown>
 
-        <span class="ps-1" :data-test="`log-expand-detail-key-${key}`">
+        <span class="min-w-0 ps-1" :data-test="`log-expand-detail-key-${key}`">
           <span class="log-key">{{ key }}</span
           ><span class="log-separator">: </span
           ><span