Merge pull request #165 from liam-hq/fix-layout

fix: fix layout for text overflow
liam-hq · Dec 5, 2024 · bc7eba2 · bc7eba2
2 parents ef2605c + e5a28ea
commit bc7eba2
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 5 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>

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/LeftPane.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/LeftPane.module.css
@@ -0,0 +1,5 @@
+.tableName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/LeftPane.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/LeftPane.tsx
@@ -12,6 +12,7 @@ import {
 } from '@liam-hq/ui'
 import { Table2 } from '@liam-hq/ui'
 import { useDBStructureStore } from '../../../stores'
+import styles from './LeftPane.module.css'
 import { TableCounter } from './TableCounter'
 
 export const LeftPane = () => {
@@ -28,7 +29,7 @@ export const LeftPane = () => {
                 <SidebarMenuItem key={table.name}>
                   <SidebarMenuButton>
                     <Table2 width="10px" />
-                    <span>{table.name}</span>
+                    <span className={styles.tableName}>{table.name}</span>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
               ))}

diff --git a/frontend/packages/ui/src/components/Sidebar/Sidebar.module.css b/frontend/packages/ui/src/components/Sidebar/Sidebar.module.css
@@ -56,6 +56,7 @@
 
 .sidebarContent {
   flex: 1 1 0%;
+  overflow-y: auto;
 }
 
 .sidebarMenuButton {