From 38a1553d42ba7bfc04ccbd60ac0583372e114a75 Mon Sep 17 00:00:00 2001
From: tyleroooo <tyler@dydx.exchange>
Date: Thu, 7 Nov 2024 18:30:20 -0500
Subject: [PATCH] fix: mobile tweaks (#1260)

---
 public/smartbanner.html    | 1 +
 src/App.tsx                | 6 +++---
 src/index.css              | 3 ++-
 src/views/MarketsStats.tsx | 4 +++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/smartbanner.html b/public/smartbanner.html
index b9c315956..1508d9d75 100644
--- a/public/smartbanner.html
+++ b/public/smartbanner.html
@@ -10,6 +10,7 @@
     <meta name="smartbanner:button" content="VIEW">
     <meta name="smartbanner:close-label" content="Close">
     <meta name="smartbanner:exclude-user-agent-regex" content="^.*(Windows NT|Intel Mac OS X).*$">
+    <meta name="smartbanner:disable-positioning" content="true" />
     <script src="https://cdn.jsdelivr.net/npm/smartbanner.js@1.22.0/dist/smartbanner.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/smartbanner.js@1.22.0/dist/smartbanner.min.css" rel="stylesheet">
     <!-- Smartbanner: End configuration -->
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index d55e65ddb..a3e0b8a29 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -116,7 +116,7 @@ const Content = () => {
         isShowingFooter={isShowingFooter}
         showRestrictionWarning={showRestrictionWarning}
       >
-        {isNotTablet && <HeaderDesktop />}
+        {isShowingHeader && <HeaderDesktop />}
         {showRestrictionWarning && <RestrictionWarning />}
         <$Main>
           <Suspense fallback={<LoadingSpace id="main" />}>
@@ -310,9 +310,9 @@ const $Content = styled.div<{
 
   ${layoutMixins.withOuterAndInnerBorders}
   display: grid;
-  ${({ showRestrictionWarning }) => css`
+  ${({ showRestrictionWarning, isShowingHeader }) => css`
     grid-template:
-      'Header' var(--page-currentHeaderHeight)
+      ${isShowingHeader ? css`'Header' var(--page-currentHeaderHeight)` : ''}
       ${showRestrictionWarning ? css`'RestrictionWarning' min-content` : ''}
       'Main' minmax(min-content, 1fr)
       'Footer' var(--page-currentFooterHeight)
diff --git a/src/index.css b/src/index.css
index b41db242c..16ef02798 100644
--- a/src/index.css
+++ b/src/index.css
@@ -98,6 +98,7 @@ b {
 }
 
 /* Fixes the smart banner being unclickable. We want this to rise above all app banners */
-.smartbanner--ios {
+.smartbanner--ios,
+.smartbanner--android {
   z-index: 999;
 }
diff --git a/src/views/MarketsStats.tsx b/src/views/MarketsStats.tsx
index 312b2eea8..b231bf468 100644
--- a/src/views/MarketsStats.tsx
+++ b/src/views/MarketsStats.tsx
@@ -6,6 +6,7 @@ import tw from 'twin.macro';
 import { STRING_KEYS } from '@/constants/localization';
 import { MarketFilters, MarketSorting } from '@/constants/markets';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useMarketsData } from '@/hooks/useMarketsData';
 import { useStringGetter } from '@/hooks/useStringGetter';
 
@@ -32,12 +33,13 @@ export const MarketsStats = (props: MarketsStatsProps) => {
     hideUnlaunchedMarkets: true,
   });
 
+  const { isTablet } = useBreakpoints();
   return (
     <section
       className={className}
       tw="grid auto-cols-fr grid-flow-col gap-1 tablet:column desktopSmall:pl-1 desktopSmall:pr-1"
     >
-      <ExchangeBillboards />
+      {!isTablet && <ExchangeBillboards />}
       {hasNewMarkets && (
         <$Section>
           <$SectionHeader>