From 42ef0808208e9ca1a16a9016ccfc208a696eeb26 Mon Sep 17 00:00:00 2001
From: LeticiadelaOsa <deletidev@gmail.com>
Date: Tue, 23 Jan 2024 10:53:57 +0100
Subject: [PATCH] sticky table header

---
 src/pods/canvas/canvas.pod.tsx                       |  3 +--
 src/pods/edit-table/components/nested-field-grid.tsx |  2 +-
 src/pods/edit-table/edit-table.module.css            | 12 ++++++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
index 10ca12cf..ecc3420a 100644
--- a/src/pods/canvas/canvas.pod.tsx
+++ b/src/pods/canvas/canvas.pod.tsx
@@ -22,7 +22,6 @@ export const CanvasPod: React.FC = () => {
   const { openModal, closeModal, modalDialog } = useModalDialogContext();
   const {
     canvasSchema,
-    loadSchema,
     updateTablePosition,
     updateFullTable,
     doFieldToggleCollapse,
@@ -36,7 +35,7 @@ export const CanvasPod: React.FC = () => {
   const { canvasSize, zoomFactor } = canvasViewSettings;
   // TODO: This is temporary code, once we get load and save
   // we won't need to load this mock data
-  // From now onwards use the examples under db-exampls folder
+  // From now onwards use the examples under db-examples folder
   // Open ...
   /*
   React.useEffect(() => {
diff --git a/src/pods/edit-table/components/nested-field-grid.tsx b/src/pods/edit-table/components/nested-field-grid.tsx
index dd3e22f9..0a703600 100644
--- a/src/pods/edit-table/components/nested-field-grid.tsx
+++ b/src/pods/edit-table/components/nested-field-grid.tsx
@@ -34,7 +34,7 @@ export const NestedFieldGrid: React.FC<NestedFieldGridProps> = ({
   onMoveUpField,
 }) => {
   const renderFieldHeaders = () => (
-    <div className={`${classes.fieldRow} ${classes[`indent${level}`]}`}>
+    <div className={`${classes.headerRow} ${classes[`indent${level}`]}`}>
       <div className={`${classes.headerCell} ${classes.expandCell}`}>
         Expand
       </div>
diff --git a/src/pods/edit-table/edit-table.module.css b/src/pods/edit-table/edit-table.module.css
index 71944b14..ba29f6f2 100644
--- a/src/pods/edit-table/edit-table.module.css
+++ b/src/pods/edit-table/edit-table.module.css
@@ -5,7 +5,8 @@
   margin: 10px;
 }
 
-.fieldRow {
+.fieldRow,
+.header-row {
   display: grid;
   grid-template-columns: auto auto auto 3fr 2fr 80px 340px;
   gap: 0px;
@@ -68,9 +69,16 @@
   margin-left: 140px;
 }
 
+/*The top position of the two position sticky's are 
+related to each other and to the dialog header*/
+.indent0.header-row {
+  position: sticky;
+  top: 5.3125rem;
+  z-index: 3;
+}
 .table-name {
   position: sticky;
-  top: 40px;
+  top: 2.5rem;
   left: 0px;
   padding-top: 10px;
   padding-bottom: 10px;