From 27e5b4ff13c07dba86aff1299b10a9919ce6f9f8 Mon Sep 17 00:00:00 2001
From: Kunghim <kunghim@163.com>
Date: Sun, 2 Aug 2026 00:57:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(data-grid):=20=E4=B8=BA?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E8=A7=86=E5=9B=BE=E5=88=97=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=88=AA=E6=96=AD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DataGridRecordViews.tsx    | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/DataGridRecordViews.tsx b/frontend/src/components/DataGridRecordViews.tsx
index 68755696..2cd62737 100644
--- a/frontend/src/components/DataGridRecordViews.tsx
+++ b/frontend/src/components/DataGridRecordViews.tsx
@@ -86,13 +86,13 @@ interface DataGridTextCellProps extends React.HTMLAttributes<HTMLDivElement> {
   'data-grid-text-value-copy'?: string;
 }
 
-interface DataGridTextValueCellProps extends DataGridTextCellProps {
+interface DataGridTextOverflowCellProps extends DataGridTextCellProps {
   value: string;
   cellBaseStyle: React.CSSProperties;
   tooltipInnerStyle: React.CSSProperties;
 }
 
-const DataGridTextValueCell: React.FC<DataGridTextValueCellProps> = ({
+const DataGridTextOverflowCell: React.FC<DataGridTextOverflowCellProps> = ({
   value,
   cellBaseStyle,
   tooltipInnerStyle,
@@ -192,18 +192,6 @@ export const DataGridTextView: React.FC<DataGridTextViewProps> = ({
     }
   }, [translate]);
 
-  const renderCell = (
-    value: string,
-    style: React.CSSProperties,
-    props?: DataGridTextCellProps,
-  ) => {
-    return (
-      <div {...props} style={{ ...cellBaseStyle, ...style }}>
-        {value}
-      </div>
-    );
-  };
-
   return (
     <div style={{ height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
       <div style={{ padding: '8px 12px', borderBottom: darkMode ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.08)', display: 'flex', alignItems: 'center', gap: 8 }}>
@@ -267,18 +255,28 @@ export const DataGridTextView: React.FC<DataGridTextViewProps> = ({
                 role="row"
                 style={{ display: 'grid', gridTemplateColumns, borderBottom }}
               >
-                {renderCell(col, { fontWeight: 600, color: primaryTextColor }, { 'data-grid-text-view-cell': 'field' })}
-                {renderCell(
-                  showColumnType ? columnType : '',
-                  { color: metaTextColor },
-                  { 'data-grid-text-view-cell': 'type' },
-                )}
-                {renderCell(
-                  showColumnComment ? columnComment : '',
-                  { color: metaTextColor },
-                  { 'data-grid-text-view-cell': 'comment' },
-                )}
-                <DataGridTextValueCell
+                <DataGridTextOverflowCell
+                  value={col}
+                  cellBaseStyle={cellBaseStyle}
+                  tooltipInnerStyle={tooltipInnerStyle}
+                  style={{ fontWeight: 600, color: primaryTextColor }}
+                  data-grid-text-view-cell="field"
+                />
+                <DataGridTextOverflowCell
+                  value={showColumnType ? columnType : ''}
+                  cellBaseStyle={cellBaseStyle}
+                  tooltipInnerStyle={tooltipInnerStyle}
+                  style={{ color: metaTextColor }}
+                  data-grid-text-view-cell="type"
+                />
+                <DataGridTextOverflowCell
+                  value={showColumnComment ? columnComment : ''}
+                  cellBaseStyle={cellBaseStyle}
+                  tooltipInnerStyle={tooltipInnerStyle}
+                  style={{ color: metaTextColor }}
+                  data-grid-text-view-cell="comment"
+                />
+                <DataGridTextOverflowCell
                   value={formattedValue}
                   cellBaseStyle={cellBaseStyle}
                   tooltipInnerStyle={tooltipInnerStyle}