[#1093] style debugging

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 && (

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;