Merge pull request #372 from liam-hq/display_related_tables_with_fixed

💄 feat: Sticky positioning for related tables in TableDetail
liam-hq · Dec 24, 2024 · 877e07b · 877e07b
2 parents 5b88dfa + 31575c5
commit 877e07b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/curvy-carrots-eat.md b/.changeset/curvy-carrots-eat.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+💄 feat: Sticky positioning for related tables in TableDetail
diff --git a/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css b/...d-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.module.css
@@ -31,3 +31,9 @@
 .body {
   overflow-y: scroll;
 }
+
+.relatedTables {
+  position: sticky;
+  bottom: 0;
+  background-color: var(--pane-background, #232526);
+}
diff --git a/...ages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx b/...ages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx
@@ -43,7 +43,9 @@ export const TableDetail: FC<Props> = ({ table }) => {
         <Columns columns={table.columns} />
         <Indices indices={table.indices} />
         <Unique columns={table.columns} />
-        <RelatedTables key={table.name} table={table} />
+        <div className={styles.relatedTables}>
+          <RelatedTables key={table.name} table={table} />
+        </div>
       </div>
     </section>
   )