fix: resolved issues with z-index and skickyness

LiskHQ · Oct 17, 2023 · 003e9de · 003e9de
1 parent fc6b62e
commit 003e9de
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/src/theme/QueryTable/QueryTable.js b/src/theme/QueryTable/QueryTable.js
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import classNames from 'classnames';
 import Table from '../table';
 import { LoadNewButton } from './LoadNewButton';
 import styles from '../table/stickyHeader/stickyHeader.css';
@@ -43,12 +44,18 @@ export const QueryTable = ({
     hasUpdate &&
     (button.wrapperClassName ? (
       <div className={button.wrapperClassName}>
-        <LoadNewButton buttonClassName={`${button.className || ''}`} handleClick={handleClick}>
+        <LoadNewButton
+          buttonClassName={classNames(button.className, styles.loadNewButton)}
+          handleClick={handleClick}
+        >
           {button.label}
         </LoadNewButton>
       </div>
     ) : (
-      <LoadNewButton buttonClassName={`${button.className || ''}`} handleClick={handleClick}>
+      <LoadNewButton
+        buttonClassName={classNames(button.className, styles.loadNewButton)}
+        handleClick={handleClick}
+      >
         {button.label}
       </LoadNewButton>
     ));

diff --git a/src/theme/table/header.js b/src/theme/table/header.js
@@ -48,26 +48,28 @@ const Header = ({ data, currentSort, headerClassName, subHeader }) => {
     return (
       <>
         <header className={`${grid.row} ${styles.row} ${styles.header} ${headerClassName || ''}`}>
-          {data.map((item, index) => (
-            <div
-              className={item.classList ? item.classList : grid[`col-md-${defaultSize}`]}
-              key={`table-header-${index}`}
-            >
-              {typeof item === 'object' ? (
-                <Sort data={item.sort} currentSort={currentSort}>
-                  <span>{item.title}</span>
-                  {item.tooltip && <Tip data={item.tooltip} />}
-                </Sort>
-              ) : (
-                <>
-                  <span>{item}</span>
-                  {item.tooltip && <Tip data={item.tooltip} />}
-                </>
-              )}
-            </div>
-          ))}
+          <>
+            {subHeader}
+            {data.map((item, index) => (
+              <div
+                className={item.classList ? item.classList : grid[`col-md-${defaultSize}`]}
+                key={`table-header-${index}`}
+              >
+                {typeof item === 'object' ? (
+                  <Sort data={item.sort} currentSort={currentSort}>
+                    <span>{item.title}</span>
+                    {item.tooltip && <Tip data={item.tooltip} />}
+                  </Sort>
+                ) : (
+                  <>
+                    <span>{item}</span>
+                    {item.tooltip && <Tip data={item.tooltip} />}
+                  </>
+                )}
+              </div>
+            ))}
+          </>
         </header>
-        {subHeader}
       </>
     );
   }

diff --git a/src/theme/table/stickyHeader/stickyHeader.css b/src/theme/table/stickyHeader/stickyHeader.css
@@ -18,3 +18,8 @@
     margin-bottom: 0;
   }
 }
+
+.loadNewButton {
+  min-width: fit-content;
+  margin-top: -101px;
+}