From ffa89d6035f20e12f8273dcfa1980b17f7dea87a Mon Sep 17 00:00:00 2001
From: abhishek <abhishekps6282@gmail.com>
Date: Tue, 30 Jan 2024 14:13:08 +0530
Subject: [PATCH] [#1093] style debugging

---
 frontend/src/pages/submissions/UploadDetail.jsx | 11 ++++++++++-
 frontend/src/pages/submissions/style.scss       |  7 ++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/submissions/UploadDetail.jsx b/frontend/src/pages/submissions/UploadDetail.jsx
index b4a279bff..2566b8774 100644
--- a/frontend/src/pages/submissions/UploadDetail.jsx
+++ b/frontend/src/pages/submissions/UploadDetail.jsx
@@ -92,6 +92,7 @@ const UploadDetail = ({ record, setReload }) => {
   const { user } = store.useState((state) => state);
   const { language } = store.useState((s) => s);
   const { active: activeLang } = language;
+  const [expandedKeys, setexpandedKeys] = useState([]);
   const text = useMemo(() => {
     return uiText[activeLang];
   }, [activeLang]);
@@ -342,6 +343,11 @@ const UploadDetail = ({ record, setReload }) => {
     );
   };
 
+  const onRow = ({ key }) =>
+    expandedRowKeys.includes(key) && { className: "sticky" };
+
+  console.log(expandedRowKeys, "expandedRowKeys");
+
   const isEditable =
     (record.approvers || []).filter((a) => a.status_text === "Rejected")
       .length > 0 && user?.role?.id === 4;
@@ -357,11 +363,12 @@ const UploadDetail = ({ record, setReload }) => {
         loading={loading}
         dataSource={selectedTab === "raw-data" ? rawValues : values}
         columns={columns}
+        onRow={onRow}
         rowClassName={(record) =>
           (record.newValue || record.newValue === 0) &&
           !isEqual(record.value, record.newValue)
             ? "row-edited"
-            : "row-normal"
+            : "row-normal sticky"
         }
         style={{ borderBottom: "solid 1px #ddd" }}
         rowKey="id"
@@ -486,6 +493,8 @@ const UploadDetail = ({ record, setReload }) => {
               }
             : false
         }
+        sticky={true}
+        scroll={{ x: 950, y: "calc(100vh - 220px)" }}
       />
       <h3>{text.notesFeedback}</h3>
       {!!comments.length && (
diff --git a/frontend/src/pages/submissions/style.scss b/frontend/src/pages/submissions/style.scss
index 534a6f79a..62c53f7bd 100644
--- a/frontend/src/pages/submissions/style.scss
+++ b/frontend/src/pages/submissions/style.scss
@@ -33,7 +33,12 @@
             color: $color-default;
             vertical-align: top;
           }
-
+          .sticky {
+            position: sticky;
+            top: 0;
+            left: 0;
+            z-index: 1;
+          }
           .ant-table-cell:nth-child(2) {
             .ant-row {
               justify-content: flex-start;