From 6581980bba001558bc3b416b41e1b57f7c5d5a5a Mon Sep 17 00:00:00 2001
From: MH4GF <h.miyagi.cnw@gmail.com>
Date: Thu, 5 Dec 2024 16:57:09 +0900
Subject: [PATCH 1/3] fix: Handle table name overflow

---
 .../src/components/ERDRenderer/LeftPane/LeftPane.module.css  | 5 +++++
 .../src/components/ERDRenderer/LeftPane/LeftPane.tsx         | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/LeftPane.module.css

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
new file mode 100644
index 00000000..7b2bfb49
--- /dev/null
+++ 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
index f5fd4e3f..166a32f6 100644
--- 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>
               ))}

From a38ddfdb82248f64c21870ca2254732d3bbc5d82 Mon Sep 17 00:00:00 2001
From: MH4GF <h.miyagi.cnw@gmail.com>
Date: Thu, 5 Dec 2024 16:59:32 +0900
Subject: [PATCH 2/3] fix: Add vertical overflow to sidebar content

---
 frontend/packages/ui/src/components/Sidebar/Sidebar.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/packages/ui/src/components/Sidebar/Sidebar.module.css b/frontend/packages/ui/src/components/Sidebar/Sidebar.module.css
index a75fd8fe..e52db3e6 100644
--- 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 {

From e5a28eaadfd1ec33fe5286c76fa638ee38caab4d Mon Sep 17 00:00:00 2001
From: MH4GF <h.miyagi.cnw@gmail.com>
Date: Thu, 5 Dec 2024 17:02:54 +0900
Subject: [PATCH 3/3] fix: Add text overflow handling for table header and
 column names

---
 .../TableNode/TableHeader/TableHeader.module.css          | 6 ++++++
 .../ERDContent/TableNode/TableHeader/TableHeader.tsx      | 2 +-
 .../ERDRenderer/ERDContent/TableNode/TableNode.module.css | 8 +++++++-
 .../ERDRenderer/ERDContent/TableNode/TableNode.tsx        | 4 ++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css
index c808808d..5c417745 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.module.css
+++ b/frontend/packages/erd-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/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
index bea4f4d7..51e488fe 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
+++ b/frontend/packages/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/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
index 28ca7b8b..1ae2549e 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
+++ b/frontend/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
index 14f390a1..cf2354ee 100644
--- 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>