fix: truesight footer position

src/components/TabButton.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from 'react'
+import styled, { CSSProperties, css } from 'styled-components'
+
+const ButtonWrapper = styled.div<{ active?: boolean; separator?: boolean }>`
+  font-size: 12px;
+  line-height: 16px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  flex: 1;
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  ${({ theme, separator, active }) =>
+    separator &&
+    !active &&
+    css`
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        height: 16px;
+        border: 1px solid ${theme.border};
+      }
+    `}
+  ${({ theme, active }) =>
+    active
+      ? css`
+          color: ${theme.primary};
+          background-color: ${theme.primary + '40'};
+          box-shadow: inset 0 -2px 0 0 ${theme.primary};
+        `
+      : css`
+          color: ${theme.subText};
+          background-color: ${theme.background};
+        `}
+
+  :hover {
+    filter: brightness(1.2);
+  }
+`
+
+type Props = { text?: string; active?: boolean; onClick?: () => void; style?: CSSProperties; separator?: boolean }
+const TabButton = forwardRef<HTMLDivElement, Props>(function TabButton(
+  { text, active, onClick, style, separator },
+  ref,
+) {
+  return (
+    <ButtonWrapper active={active} onClick={onClick} style={style} separator={separator} ref={ref}>
+      {text}
+    </ButtonWrapper>
+  )
+})
+
+export default TabButton

src/components/swapv2/LimitOrder/ListOrder/TableHeader.tsx

@@ -19,7 +19,7 @@ const Header = styled(ItemWrapper)`
     border-radius: 0px;
     padding-left: 30px;
     margin-left: -30px;
-    width: 110vw;
+    width: calc(100vw + 14px);
   `};
 `
 

src/pages/App.tsx

@@ -82,7 +82,6 @@ const AppWrapper = styled.div`
   display: flex;
   flex-flow: column;
   align-items: flex-start;
-  overflow-x: hidden;
 `
 
 const HeaderWrapper = styled.div`

src/pages/TrueSightV2/components/TruesightFooter.tsx

@@ -22,7 +22,7 @@ const slideInFromBottom = keyframes`
 const Wrapper = styled(Row)`
   background-color: ${({ theme }) => theme.background};
   height: 44px;
-  position: fixed;
+  position: sticky;
   bottom: 0;
   left: 0;
   right: 0;

src/pages/TrueSightV2/components/index.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import React, { CSSProperties, ReactNode, useLayoutEffect, useRef, useState } from 'react'
+import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { useParams } from 'react-router'
 import { useMedia } from 'react-use'
@@ -10,6 +10,7 @@ import Column from 'components/Column'
 import Icon from 'components/Icons/Icon'
 import Modal from 'components/Modal'
 import Row, { RowBetween, RowFit } from 'components/Row'
+import TabButton from 'components/TabButton'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
@@ -419,59 +420,3 @@ export const SectionWrapper = ({
     </StyledSectionWrapper>
   )
 }
-
-const StyledMobileTabButton = styled.div<{ active?: boolean }>`
-  font-size: 12px;
-  line-height: 16px;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  flex: 1;
-  box-sizing: border-box;
-  cursor: pointer;
-  ${({ theme, active }) =>
-    active
-      ? css`
-          color: ${theme.primary};
-          background-color: ${theme.primary + '40'};
-          box-shadow: inset 0 -2px 0 0 ${theme.primary};
-        `
-      : css`
-          color: ${theme.subText};
-          background-color: ${theme.background};
-        `}
-
-  :hover {
-    filter: brightness(1.2);
-  }
-`
-
-export const TabButton = ({
-  text,
-  active,
-  onClick,
-  style,
-}: {
-  text?: string
-  active?: boolean
-  onClick?: () => void
-  style?: CSSProperties
-}) => {
-  const above768 = useMedia(`(min-width: ${MEDIA_WIDTHS.upToSmall}px)`)
-
-  return (
-    <>
-      {above768 ? (
-        <StyledMobileTabButton active={active} onClick={onClick} style={style}>
-          {text}
-        </StyledMobileTabButton>
-      ) : (
-        <StyledMobileTabButton active={active} onClick={onClick} style={style}>
-          {text}
-        </StyledMobileTabButton>
-      )}
-    </>
-  )
-}