fix: mobile tweaks (#1260)

dydxprotocol · Nov 7, 2024 · 38a1553 · 38a1553
1 parent 45daeb0
commit 38a1553
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git 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/[email protected]/dist/smartbanner.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/smartbanner.min.css" rel="stylesheet">
     <!-- Smartbanner: End configuration -->
diff --git 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
@@ -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
@@ -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>