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