fix bottom page padding

components/StatusBar.tsx

@@ -44,7 +44,7 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
     <div
       className={`hidden fixed ${
         collapsed ? 'w-[calc(100vw-64px)]' : 'w-[calc(100vw-200px)]'
-      } bottom-0 bg-th-bkg-2 md:grid md:grid-cols-3 px-4 md:px-6 py-1`}
+      } bottom-0 bg-th-input-bkg md:grid md:grid-cols-3 px-4 md:px-6 py-1`}
     >
       <div className="col-span-1 flex items-center">
         <Tps />

components/stats/StatsPage.tsx

@@ -44,7 +44,7 @@ const StatsPage = () => {
     return TABS.map((t) => [t, 0])
   }, [])
   return (
-    <div className="pb-20 md:pb-16">
+    <div className="pb-20 md:pb-[27px]">
       {market ? (
         <PerpStatsPage />
       ) : token ? (

components/trade/TradeAdvancedPage.tsx

@@ -275,76 +275,80 @@ const TradeAdvancedPage = () => {
     <MobileTradeAdvancedPage />
   ) : (
     <TradeHotKeys>
-      <FavoriteMarketsBar />
-      <ResponsiveGridLayout
-        layouts={layouts}
-        breakpoints={gridBreakpoints}
-        onBreakpointChange={(bp) => setBreakpoint(bp)}
-        cols={{
-          xxxl: totalCols,
-          xxl: totalCols,
-          xl: totalCols,
-          lg: totalCols,
-          md: totalCols,
-          sm: totalCols,
-        }}
-        rowHeight={1}
-        isDraggable={!uiLocked}
-        isResizable={!uiLocked}
-        containerPadding={[0, 0]}
-        margin={[0, 0]}
-        useCSSTransforms
-        onLayoutChange={handleLayoutChange}
-        measureBeforeMount
-      >
-        <div key="market-header" className="z-10">
-          <AdvancedMarketHeader />
-        </div>
-        <div
-          key="tv-chart"
-          className="h-full border border-x-0 border-th-bkg-3"
+      <div className="pb-[27px]">
+        <FavoriteMarketsBar />
+        <ResponsiveGridLayout
+          layouts={layouts}
+          breakpoints={gridBreakpoints}
+          onBreakpointChange={(bp) => setBreakpoint(bp)}
+          cols={{
+            xxxl: totalCols,
+            xxl: totalCols,
+            xl: totalCols,
+            lg: totalCols,
+            md: totalCols,
+            sm: totalCols,
+          }}
+          rowHeight={1}
+          isDraggable={!uiLocked}
+          isResizable={!uiLocked}
+          containerPadding={[0, 0]}
+          margin={[0, 0]}
+          useCSSTransforms
+          onLayoutChange={handleLayoutChange}
+          measureBeforeMount
         >
-          <div className={`relative h-full overflow-auto`}>
-            <OrderbookTooltip />
-            <TradingChartContainer />
+          <div key="market-header" className="z-10">
+            <AdvancedMarketHeader />
           </div>
-        </div>
-        <div
-          className={`${
-            tradeLayout === 'chartLeft' ? 'lg:border-r lg:border-th-bkg-3' : ''
-          }`}
-          key="balances"
-        >
-          <TradeInfoTabs />
-        </div>
-        <div
-          className={`border-y border-l border-th-bkg-3 lg:border-b-0 ${
-            tradeLayout === 'chartMiddleOBRight'
-              ? 'lg:border-r lg:border-l-0'
-              : ''
-          } ${
-            tradeLayout === 'chartRight' ? 'lg:border-r lg:border-l-0' : ''
-          } ${tradeLayout === 'chartLeft' ? 'lg:border-l-0' : ''}`}
-          key="trade-form"
-        >
-          <AdvancedTradeForm />
-        </div>
-        <div
-          key="orderbook"
-          className={`overflow-hidden border-l border-th-bkg-3 lg:border-y ${
-            tradeLayout === 'chartRight' ? 'lg:border-l-0 lg:border-r' : ''
-          } ${
-            tradeLayout === 'chartMiddleOBLeft'
-              ? 'lg:border-l-0 lg:border-r'
-              : ''
-          } ${tradeLayout === 'chartLeft' ? 'lg:border-r' : ''}`}
-        >
-          <OrderbookAndTrades />
-        </div>
-      </ResponsiveGridLayout>
-      {/* {!tourSettings?.trade_tour_seen && isOnboarded && connected ? (
+          <div
+            key="tv-chart"
+            className="h-full border border-x-0 border-th-bkg-3"
+          >
+            <div className={`relative h-full overflow-auto`}>
+              <OrderbookTooltip />
+              <TradingChartContainer />
+            </div>
+          </div>
+          <div
+            className={`${
+              tradeLayout === 'chartLeft'
+                ? 'lg:border-r lg:border-th-bkg-3'
+                : ''
+            }`}
+            key="balances"
+          >
+            <TradeInfoTabs />
+          </div>
+          <div
+            className={`border-y border-l border-th-bkg-3 lg:border-b-0 ${
+              tradeLayout === 'chartMiddleOBRight'
+                ? 'lg:border-r lg:border-l-0'
+                : ''
+            } ${
+              tradeLayout === 'chartRight' ? 'lg:border-r lg:border-l-0' : ''
+            } ${tradeLayout === 'chartLeft' ? 'lg:border-l-0' : ''}`}
+            key="trade-form"
+          >
+            <AdvancedTradeForm />
+          </div>
+          <div
+            key="orderbook"
+            className={`overflow-hidden border-l border-th-bkg-3 lg:border-y ${
+              tradeLayout === 'chartRight' ? 'lg:border-l-0 lg:border-r' : ''
+            } ${
+              tradeLayout === 'chartMiddleOBLeft'
+                ? 'lg:border-l-0 lg:border-r'
+                : ''
+            } ${tradeLayout === 'chartLeft' ? 'lg:border-r' : ''}`}
+          >
+            <OrderbookAndTrades />
+          </div>
+        </ResponsiveGridLayout>
+        {/* {!tourSettings?.trade_tour_seen && isOnboarded && connected ? (
         <TradeOnboardingTour />
       ) : null} */}
+      </div>
     </TradeHotKeys>
   )
 }

pages/index.tsx

@@ -27,7 +27,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Index: NextPage = () => {
   return (
-    <div className="min-h-[calc(100vh-64px)] pb-32 md:pb-20 lg:pb-0">
+    <div className="min-h-[calc(100vh-64px)] pb-32 md:pb-20 lg:pb-[27px]">
       <AccountPage />
     </div>
   )

pages/leaderboard.tsx

@@ -18,7 +18,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Leaderboard: NextPage = () => {
   return (
-    <div className="pb-16 md:pb-0">
+    <div className="pb-16 md:pb-[27px]">
       <LeaderboardPage />
     </div>
   )

pages/settings.tsx

@@ -25,7 +25,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Settings: NextPage = () => {
   return (
-    <div className="p-8 pb-20 md:pb-16 lg:p-10">
+    <div className="p-8 pb-20 md:pb-16">
       <SettingsPage />
     </div>
   )

pages/swap.tsx

@@ -25,7 +25,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
 
 const Swap: NextPage = () => {
   return (
-    <div className="pb-32 md:pb-20 lg:pb-0">
+    <div className="pb-32 md:pb-20 lg:pb-[27px]">
       <SwapPage />
     </div>
   )