fix(Blog): Fix weird gap (#8984)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->


<!-- start pr-codex -->

---

## PR-Codex overview
### Detailed summary
- Added `react-device-detect` library to import `isMobile` function
- Updated `StyledTagContainer` and `StyledMobileTagContainer` to
conditionally display based on `isMobile`
- Removed `display: none` from `StyledTagContainer` and
`StyledMobileTagContainer` media queries
- Updated `AllArticle` component to conditionally render
`CategoriesSelector` based on `isMobile`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/blog/components/Article/AllArticle/index.tsx

@@ -10,6 +10,7 @@ import useAllArticle from 'hooks/useAllArticle'
 import useLanguage from 'hooks/useLanguage'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
+import { isMobile } from 'react-device-detect'
 import { styled } from 'styled-components'
 import { LS_KEY, getLanguageCodeFromLS } from 'utils/getLanguageCodeFromLS'
 
@@ -28,26 +29,18 @@ const StyledArticleContainer = styled(Box)`
 `
 
 const StyledTagContainer = styled(Box)`
-  display: none;
+  display: flex;
+  flex-direction: column;
   width: 194px;
   min-width: 194px;
   margin-right: 25px;
-
-  ${({ theme }) => theme.mediaQueries.xxl} {
-    display: flex;
-    flex-direction: column;
-  }
 `
 
 const StyledMobileTagContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   padding: 0 16px;
   margin-bottom: 24px;
-
-  ${({ theme }) => theme.mediaQueries.xxl} {
-    display: none;
-  }
 `
 
 const StyledCard = styled(Flex)`
@@ -145,14 +138,16 @@ const AllArticle = () => {
         {t('All articles')}
       </Text>
       <Flex p={['0', '0', '0', '0', '0', '0', '0 16px']}>
-        <StyledTagContainer>
-          <CategoriesSelector
-            selected={selectedCategories}
-            categoriesData={categoriesData ?? []}
-            setSelected={setSelectCategoriesSelected}
-            childMargin="0 0 28px 0"
-          />
-        </StyledTagContainer>
+        {!isMobile && (
+          <StyledTagContainer>
+            <CategoriesSelector
+              selected={selectedCategories}
+              categoriesData={categoriesData ?? []}
+              setSelected={setSelectCategoriesSelected}
+              childMargin="0 0 28px 0"
+            />
+          </StyledTagContainer>
+        )}
         <Flex width={['100%', '100%', '100%', '100%', '100%', '100%', '907px']} flexDirection="column">
           <Flex
             mb={['18px', '18px', '18px', '24px']}
@@ -181,19 +176,21 @@ const AllArticle = () => {
               </InputGroup>
             </Box>
           </Flex>
-          <StyledMobileTagContainer>
-            <Text fontSize="12px" textTransform="uppercase" color="textSubtle" fontWeight={600} mb="4px">
-              {t('Filter by')}
-            </Text>
-            <Flex overflowY="auto">
-              <CategoriesSelector
-                selected={selectedCategories}
-                categoriesData={categoriesData ?? []}
-                setSelected={setSelectCategoriesSelected}
-                childMargin="0 4px 4px 0"
-              />
-            </Flex>
-          </StyledMobileTagContainer>
+          {isMobile && (
+            <StyledMobileTagContainer>
+              <Text fontSize="12px" textTransform="uppercase" color="textSubtle" fontWeight={600} mb="4px">
+                {t('Filter by')}
+              </Text>
+              <Flex overflowY="auto">
+                <CategoriesSelector
+                  selected={selectedCategories}
+                  categoriesData={categoriesData ?? []}
+                  setSelected={setSelectCategoriesSelected}
+                  childMargin="0 4px 4px 0"
+                />
+              </Flex>
+            </StyledMobileTagContainer>
+          )}
           {!isFetching && articles.length === 0 ? (
             <Text bold fontSize={20} padding={['0 16px', '0 16px', '0 16px', '0 16px', '0 16px', '0 16px', '0']}>
               {t('No results found.')}