From 717eb6ca4c06b2322c0d5f4fe125a35a66164195 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B8b=C4=97rt=C3=B8?=
 <106074508+EchoDex@users.noreply.github.com>
Date: Fri, 23 Feb 2024 13:09:52 +0400
Subject: [PATCH 1/2] fix: added custom scroll for

---
 spark-frontend/src/index.css                  | 26 +++++++++++++++++++
 .../ConnectWallet/ConnectWalletDialog.tsx     |  2 +-
 .../src/screens/Faucet/TokensFaucetTable.tsx  |  3 +--
 .../BottomTablesInterfaceSpotImpl.tsx         |  5 ++--
 .../SpotTrades/SpotTrades.tsx                 |  3 +--
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/spark-frontend/src/index.css b/spark-frontend/src/index.css
index c4adbab6..ec4fc16c 100644
--- a/spark-frontend/src/index.css
+++ b/spark-frontend/src/index.css
@@ -23,6 +23,32 @@ body.noscroll {
   overflow-y: hidden;
 }
 
+.better-scroll {
+  pointer-events: auto;
+
+  transition: scrollbar-color 250ms;
+
+  -webkit-overflow-scrolling: touch;
+  scrollbar-color: rgba(150, 150, 150, 0) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(150, 150, 150, 0);
+    border-radius: 6px;
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.01);
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    scrollbar-color: rgba(150, 150, 150, 0.3) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(150, 150, 150, 0.3);
+    }
+  }
+}
+
 @font-face {
   font-family: "JetBrains Mono";
   src:
diff --git a/spark-frontend/src/screens/ConnectWallet/ConnectWalletDialog.tsx b/spark-frontend/src/screens/ConnectWallet/ConnectWalletDialog.tsx
index abbe5f4a..bf43d13d 100644
--- a/spark-frontend/src/screens/ConnectWallet/ConnectWalletDialog.tsx
+++ b/spark-frontend/src/screens/ConnectWallet/ConnectWalletDialog.tsx
@@ -125,7 +125,7 @@ const ConnectWalletDialog: React.FC<IProps> = observer(({ onClose, ...rest }) =>
   const renderAgreement = () => {
     return (
       <>
-        <AgreementContainer>{AGREEMENT_TEXT}</AgreementContainer>
+        <AgreementContainer className="better-scroll">{AGREEMENT_TEXT}</AgreementContainer>
         <ButtonContainer>
           <CheckboxContainer>
             <Checkbox checked={settingsStore.isUserAgreedWithTerms} onChange={toggleUserAgreement}>
diff --git a/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx b/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx
index 25b6f44d..819fc37e 100644
--- a/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx
+++ b/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx
@@ -15,7 +15,7 @@ interface IProps {}
 const TokensFaucetTable: React.FC<IProps> = observer((assetId) => {
   const { faucetStore } = useStores();
   return (
-    <Root>
+    <Root className="better-scroll">
       <StyledTableRow>
         <TableTitle>Asset</TableTitle>
         <TableTitle>Mint amount</TableTitle>
@@ -84,7 +84,6 @@ const TableTitle = styled(Text)`
 `;
 
 const TableBody = styled(Column)`
-  //overflow: scroll;
   width: 100%;
   box-sizing: border-box;
 `;
diff --git a/spark-frontend/src/screens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx b/spark-frontend/src/screens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx
index 9c3a8b91..cb3d8a07 100644
--- a/spark-frontend/src/screens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx
+++ b/spark-frontend/src/screens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx
@@ -371,7 +371,7 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
             </Tooltip>
           </TableSizeSelector>
         </TabContainer>
-        <TableContainer>{renderTable()}</TableContainer>
+        <TableContainer className="better-scroll">{renderTable()}</TableContainer>
       </TableRoot>
       {!!vm.myOrders.length && tabIndex === 0 && <CancelAllButton>Cancel all orders</CancelAllButton>}
     </Root>
@@ -389,7 +389,7 @@ const TableRoot = styled.div`
   flex: 1;
   border-radius: 10px;
   max-width: 100%;
-  overflow-x: scroll;
+  height: 100%;
 
   ${media.mobile} {
     flex: initial;
@@ -479,6 +479,7 @@ const TableSize = styled.div<{ active?: boolean }>`
 
 const TableContainer = styled(SmartFlex)`
   width: 100%;
+  height: 100%;
   overflow-y: scroll;
 `;
 
diff --git a/spark-frontend/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx b/spark-frontend/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx
index 7ea38962..3404fba5 100644
--- a/spark-frontend/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx
+++ b/spark-frontend/src/screens/TradeScreen/OrderbookAndTradesInterface/SpotTrades/SpotTrades.tsx
@@ -49,7 +49,7 @@ const SpotTradesImpl: React.FC<IProps> = observer(() => {
       </Header>
       <SizedBox height={8} />
 
-      <Container>
+      <Container className="better-scroll">
         {trades.map((trade) => (
           <Row key={"trade" + trade.id} alignItems="center" justifyContent="space-between" style={{ marginBottom: 2 }}>
             <Text color={theme.colors.textPrimary} type={TEXT_TYPES.BODY}>
@@ -106,7 +106,6 @@ const Container = styled.div<{
   height: 100%;
   box-sizing: border-box;
   padding: 0 12px;
-  overflow-x: hidden;
   overflow-y: auto;
   max-height: calc(100vh - 200px);
 

From a2cc62d37365046216db709ed19ae6b0a035094d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B8b=C4=97rt=C3=B8?=
 <106074508+EchoDex@users.noreply.github.com>
Date: Fri, 23 Feb 2024 13:16:42 +0400
Subject: [PATCH 2/2] fix: table header

---
 spark-frontend/src/components/Table.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/spark-frontend/src/components/Table.tsx b/spark-frontend/src/components/Table.tsx
index adaee4f2..e5005004 100644
--- a/spark-frontend/src/components/Table.tsx
+++ b/spark-frontend/src/components/Table.tsx
@@ -95,6 +95,13 @@ const Root = styled.div<{ hovered?: boolean; fitContent?: boolean }>`
   table {
     width: 100%;
     border-spacing: 0;
+    position: relative;
+
+    thead {
+      position: sticky;
+      top: 0;
+      background: ${({ theme }) => theme.colors.bgPrimary};
+    }
 
     tr {
       color: ${({ theme }) => `${theme.colors.textPrimary}`};