From 95dd8788848b7aa0ac4fc9ad6128de8ef377e639 Mon Sep 17 00:00:00 2001
From: junkisai <jonki.beam@gmail.com>
Date: Thu, 26 Dec 2024 16:13:40 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20update=20TableHeader=20styles=20?=
 =?UTF-8?q?and=20add=20handle=20positioning=20for=20connections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/soft-crabs-begin.md                    |  6 ++++++
 .../TableColumnList/TableColumn/TableColumn.tsx   |  5 ++---
 .../TableNode/TableHeader/TableHeader.module.css  | 15 +++++++++++++++
 .../TableNode/TableHeader/TableHeader.tsx         | 14 ++++++++++++--
 4 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/soft-crabs-begin.md

diff --git a/.changeset/soft-crabs-begin.md b/.changeset/soft-crabs-begin.md
new file mode 100644
index 000000000..ead8c48c1
--- /dev/null
+++ b/.changeset/soft-crabs-begin.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+🐛 update TableHeader styles and add handle positioning for connections
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx
index f2e371396..44ac42df1 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableColumnList/TableColumn/TableColumn.tsx
@@ -4,7 +4,6 @@ import type {
 } from '@liam-hq/db-structure'
 import { DiamondFillIcon, DiamondIcon, KeyRound, Link } from '@liam-hq/ui'
 import { Handle, Position } from '@xyflow/react'
-import clsx from 'clsx'
 import type { FC } from 'react'
 import styles from './TableColumn.module.css'
 
@@ -70,7 +69,7 @@ export const TableColumn: FC<TableColumnProps> = ({
           id={handleId}
           type="source"
           position={Position.Right}
-          className={clsx([styles.handle])}
+          className={styles.handle}
         />
       )}
 
@@ -79,7 +78,7 @@ export const TableColumn: FC<TableColumnProps> = ({
           id={handleId}
           type="target"
           position={Position.Left}
-          className={clsx([styles.handle])}
+          className={styles.handle}
         />
       )}
     </li>
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 c42d98e4b..6ad77e84f 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
@@ -23,3 +23,18 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.handle {
+  top: auto;
+  opacity: 0;
+}
+
+.handle[data-handlepos='right'] {
+  transform: translate(50%, 0%);
+  right: -17px;
+}
+
+.handle[data-handlepos='left'] {
+  transform: translate(-50%, 0%);
+  left: -20px;
+}
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 5be0917ff..9954c18f5 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
@@ -49,10 +49,20 @@ export const TableHeader: FC<Props> = ({ data }) => {
       {showMode === 'TABLE_NAME' && (
         <>
           {isTarget && (
-            <Handle id={name} type="target" position={Position.Left} />
+            <Handle
+              id={name}
+              type="target"
+              position={Position.Left}
+              className={styles.handle}
+            />
           )}
           {isSource && (
-            <Handle id={name} type="source" position={Position.Right} />
+            <Handle
+              id={name}
+              type="source"
+              position={Position.Right}
+              className={styles.handle}
+            />
           )}
         </>
       )}