fix: Add text overflow handling for table header and column names

liam-hq · Dec 5, 2024 · e5a28ea · e5a28ea
1 parent a38ddfd
commit e5a28ea
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css b/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css
@@ -12,3 +12,9 @@
   font-weight: 500;
   line-height: normal;
 }
+
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/...ages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx b/...ages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
@@ -10,7 +10,7 @@ export const TableHeader: FC<Props> = ({ name }) => {
   return (
     <div className={styles.wrapper}>
       <Table2 width={16} />
-      <span>{name}</span>
+      <span className={styles.name}>{name}</span>
     </div>
   )
 }
diff --git a/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
@@ -31,11 +31,17 @@
   color: var(--overlay-70);
 }
 
-.columnName {
+.columnNameWrapper {
   display: inline-flex;
   justify-content: space-between;
 }
 
+.columnName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .columnType {
   color: var(--overlay-70, rgba(255, 255, 255, 0.7));
   text-align: right;

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
@@ -60,8 +60,8 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
                       />
                     ))}
 
-                  <span className={styles.columnName}>
-                    <span>{column.name}</span>
+                  <span className={styles.columnNameWrapper}>
+                    <span className={styles.columnName}>{column.name}</span>
                     <span className={styles.columnType}>{column.type}</span>
                   </span>
                 </li>