chore: floating and mobile layout

apps/web/src/components/AdPanel/Card.tsx

@@ -2,9 +2,7 @@ import { Box, CloseIcon, Flex, IconButton, Image } from '@pancakeswap/uikit'
 import styled from 'styled-components'
 
 const BaseCard = styled(Box)`
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
+  position: relative;
   padding: 16px;
   width: 328px;
   height: 164px;
@@ -39,7 +37,7 @@ const SliderContainer = styled(Box)`
   left: 16px;
 
   width: 148px;
-  height: 8px;
+  height: 8px; /* temporary */
   border: 1px solid gray;
 `
 

apps/web/src/components/AdPanel/CardLayouts.tsx

@@ -1,21 +1,47 @@
-import { getPortalRoot, useMatchBreakpoints } from '@pancakeswap/uikit'
+import { Box, getPortalRoot, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { createPortal } from 'react-dom'
+import styled from 'styled-components'
 import { TitleContentAd } from './Variations/TitleContentAd'
 
+const FloatingContainer = styled(Box)`
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+`
+
+const MobileContainer = styled(Box)`
+  border: 1px solid red;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
 /**
  * Renders floating Ad banners on desktop
  */
 export const DesktopCard = () => {
   const portalRoot = getPortalRoot()
   const { isDesktop } = useMatchBreakpoints()
 
-  return portalRoot && isDesktop ? createPortal(<TitleContentAd />, portalRoot) : null
+  return portalRoot && isDesktop
+    ? createPortal(
+        <FloatingContainer>
+          <TitleContentAd />
+        </FloatingContainer>,
+        portalRoot,
+      )
+    : null
 }
 
 /**
  * Renders Ad banners on mobile and tablet
  */
 export const MobileCard = () => {
   const { isDesktop } = useMatchBreakpoints()
-  return !isDesktop ? <TitleContentAd /> : null
+  return !isDesktop ? (
+    <MobileContainer>
+      <TitleContentAd />
+    </MobileContainer>
+  ) : null
 }

apps/web/src/pages/_app.tsx

@@ -180,6 +180,7 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
       <ShowMenu>
         <Layout>
           <Component {...pageProps} />
+          {/* <AdPanel.MobileCard /> */}
           <AdPanel.DesktopCard />
         </Layout>
       </ShowMenu>

apps/web/src/views/SwapSimplify/index.tsx

@@ -3,6 +3,7 @@ import { BottomDrawer, Box, Flex, useMatchBreakpoints } from '@pancakeswap/uikit
 import { useRouter } from 'next/router'
 import { useContext, useEffect, useState } from 'react'
 
+import { AdPanel } from 'components/AdPanel'
 import { useCurrency } from 'hooks/Tokens'
 import { useSwapHotTokenDisplay } from 'hooks/useSwapHotTokenDisplay'
 import { Field } from 'state/swap/actions'
@@ -130,6 +131,8 @@ export default function V4Swap() {
           </StyledSwapContainer>
         </Flex>
       </Flex>
+
+      <AdPanel.MobileCard />
     </Page>
   )
 }