Correction of the text overlapping

src/pods/canvas/components/table/database-table-row.component.tsx

@@ -3,6 +3,7 @@ import { FieldVm, TableVm } from '@/core/providers/canvas-schema';
 import classes from './database-table.module.css';
 import { TABLE_CONST } from '@/core/providers/canvas-schema/canvas.const';
 import { calculateDBColumnsWidth } from '@/pods/edit-table/edit-table.business';
+import { TruncatedText } from './truncated-text.component';
 
 interface Props {
   tableInfo: TableVm;
@@ -43,13 +44,14 @@ export const DatabaseTableRow: React.FC<Props> = props => {
             {isExpanded ? '▼' : '►'}
           </text>
         )}
-        <text
-          x={TABLE_CONST.FIELD_NAME_X_OFFSET + (isExpandable ? 15 : 0)}
-          y={TABLE_CONST.FONT_SIZE}
-          className={classes.tableTextRow}
-        >
-          {field.name}
-        </text>
+        <TruncatedText
+          id={field.id}
+          text={field.name}
+          x={TABLE_CONST.FONT_SIZE}
+          y={0}
+          width={columnWidths[0]}
+          height={TABLE_CONST.FONT_SIZE}
+        />
       </g>
       <text
         x={columnWidths[0] + columnWidths[1]}

src/pods/canvas/components/table/truncated-text.component.tsx

@@ -0,0 +1,32 @@
+import { GUID } from '@/core/model';
+import classes from './database-table.module.css';
+
+interface Props {
+  id: GUID;
+  text: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export const TruncatedText: React.FC<Props> = props => {
+  const { text, x, y, width, height, id } = props;
+
+  return (
+    <>
+      <clipPath id={`clip_${id}`}>
+        <rect x={x} y={y} width={width} height={height + 10}></rect>
+      </clipPath>
+
+      <text
+        x={x + 5}
+        y={y + height}
+        clip-path={`url(#clip_${id})`}
+        className={classes.tableTextRow}
+      >
+        {text}
+      </text>
+    </>
+  );
+};