Fix: header responsive structure

vtexdocs · Mar 24, 2022 · 51b0257 · 51b0257
1 parent b6d6aa0
commit 51b0257
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -54,7 +54,7 @@ const Header = () => {
           </Link>
         </HeaderBrand.Brand>
 
-        <Flex sx={styles.searchContainer}>
+        <Box sx={styles.searchContainer}>
           <Flex sx={styles.searchBox}>
             <SearchIcon sx={styles.searchIcon} />
             <input
@@ -66,7 +66,7 @@ const Header = () => {
               onChange={(e) => setSearchValue(e.currentTarget.value)}
             />
           </Flex>
-        </Flex>
+        </Box>
 
         <HeaderBrand.RightLinks sx={styles.rightLinks}>
           <Text sx={styles.docsDropDown}>Docs</Text>

diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts
@@ -9,11 +9,17 @@ const headerContainer: SxStyleProp = {
 
 const headerBrand: SxStyleProp = {
   gridTemplateColumns: '1fr 2fr 0fr 1fr',
+  width: '100%',
   position: 'relative',
 }
 const logoSize: SxStyleProp = { width: '200px', height: 'auto' }
 
-const rightLinks: SxStyleProp = { height: '100%', pr: '64px' }
+const rightLinks: SxStyleProp = {
+  display: ['none', 'flex !important'],
+  width: 'auto',
+  height: '100%',
+  pr: '64px',
+}
 
 const rightLinksItem: SxStyleProp = { alignItems: 'center' }
 
@@ -30,6 +36,7 @@ const docsDropDown: SxStyleProp = {
 const iconContainer: SxStyleProp = { paddingLeft: 3, color: 'primary.base' }
 
 const searchContainer: SxStyleProp = {
+  display: ['none', 'flex', 'flex', 'flex'],
   justifyContent: 'center',
   paddingBlock: '18px',
   height: 'auto',

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,5 +1,5 @@
 a {
-  text-decoration: none;
+  text-decoration: none !important;
 }
 
 footer > div {