From 085cfffdf646491a821244a4d4b12cd27bcce09e Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Tue, 15 Apr 2025 14:33:40 +0800
Subject: [PATCH] fix: limit property value display length to prevent
 horizontal scrollbars

---
 lightrag_webui/src/components/graph/EditablePropertyRow.tsx   | 2 +-
 lightrag_webui/src/components/graph/PropertyRowComponents.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lightrag_webui/src/components/graph/EditablePropertyRow.tsx b/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
index 87fc4073..40db2bdf 100644
--- a/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
+++ b/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
@@ -116,7 +116,7 @@ const EditablePropertyRow = ({
   }
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-1 overflow-hidden">
       <PropertyName name={name} />
       <EditIcon onClick={handleEditClick} />:
       <PropertyValue
diff --git a/lightrag_webui/src/components/graph/PropertyRowComponents.tsx b/lightrag_webui/src/components/graph/PropertyRowComponents.tsx
index cebe2c96..3f06bf30 100644
--- a/lightrag_webui/src/components/graph/PropertyRowComponents.tsx
+++ b/lightrag_webui/src/components/graph/PropertyRowComponents.tsx
@@ -42,9 +42,9 @@ interface PropertyValueProps {
 }
 
 export const PropertyValue = ({ value, onClick, tooltip }: PropertyValueProps) => (
-  <div className="flex items-center gap-1">
+  <div className="flex items-center gap-1 overflow-hidden">
     <Text
-      className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
+      className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis whitespace-nowrap"
       tooltipClassName="max-w-80 -translate-x-15"
       text={value}
       tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}