From 6ba332d09351b473c920b603ff4f959418ed3afb Mon Sep 17 00:00:00 2001
From: Maja Komel <maja.komel@gmail.com>
Date: Wed, 20 Dec 2023 11:30:25 +0100
Subject: [PATCH] Mobile layout fixes: findings, domains, networks pages (#898)

---
 components/NavBar.js                  | 10 ++++++++--
 components/SharedStyledComponents.js  |  4 ++--
 components/findings/FindingDisplay.js |  4 ++--
 pages/countries.js                    | 24 ++++++++++++++----------
 pages/domains.js                      |  6 +++---
 pages/findings/index.js               | 12 ++++++++----
 pages/networks.js                     |  6 +++---
 7 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/components/NavBar.js b/components/NavBar.js
index 95e4e42f6..9d90e5ef9 100644
--- a/components/NavBar.js
+++ b/components/NavBar.js
@@ -37,6 +37,12 @@ const LanguageSelect = styled.select`
   font-size: inherit;
   padding: 0;
   padding-bottom: 6px;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
   &:hover {
     opacity: 1;
   }
@@ -57,7 +63,7 @@ const StyledNavBar = styled.div`
   background-color: ${(props) => props.$bgColor || props.theme.colors.blue5};
   padding-top: 16px;
   padding-bottom: 20px;
-  z-index: 999;
+  z-index: 9999;
 `
 
 const StyledResponsiveMenu = styled(Box)`
@@ -81,6 +87,7 @@ const StyledResponsiveMenu = styled(Box)`
     display: none;
 
     &.visible {
+      z-index: 999999;
       display: block;
       overflow-y: scroll;
       max-height: 100%;
@@ -90,7 +97,6 @@ const StyledResponsiveMenu = styled(Box)`
       top: 0;
       right: 0;
       background: ${(props) => props.theme.colors.gray0};
-      z-index: 999;
       
       .menuItems {
         padding-top: ${(props) => props.theme.space[2]}px;
diff --git a/components/SharedStyledComponents.js b/components/SharedStyledComponents.js
index 82855c012..4aa4d56c9 100644
--- a/components/SharedStyledComponents.js
+++ b/components/SharedStyledComponents.js
@@ -5,7 +5,7 @@ export const StyledSticky = styled.div`
 position: sticky;
 top: 0;
 background: white;
-z-index: 100;
+z-index: 99;
 border-bottom: 1px solid ${props => props.theme.colors.gray3};
 `
 
@@ -19,7 +19,7 @@ export const StyledStickySubMenu = styled.div`
 position: sticky;
 top: 66px;
 background: white;
-z-index: 100;
+z-index: 99;
 border-bottom: 1px solid ${props => props.theme.colors.gray3};
 `
 
diff --git a/components/findings/FindingDisplay.js b/components/findings/FindingDisplay.js
index e95fd4f24..8a7e08a7e 100644
--- a/components/findings/FindingDisplay.js
+++ b/components/findings/FindingDisplay.js
@@ -46,9 +46,9 @@ const FindingDisplay = ({ incident }) => {
       )}
       <Text color="gray6" mb={3}>{incident?.start_time && formatLongDate(incident?.start_time, intl.locale)} - {incident?.end_time ? formatLongDate(incident?.end_time, intl.locale) : 'ongoing'}</Text>
       {!!incident?.tags?.length && (
-        <Flex mb={3}>
+        <Flex mb={3} flexWrap='wrap' sx={{gap: 2}}>
           {incident.tags.map((tag) => (
-            <Box key={tag} mr={2}>
+            <Box key={tag}>
               <Badge>{tag}</Badge>
             </Box>
           ))}
diff --git a/pages/countries.js b/pages/countries.js
index f87d71324..e7c2eb415 100644
--- a/pages/countries.js
+++ b/pages/countries.js
@@ -102,7 +102,7 @@ const StyledRegionLink = styled.a`
 `
 
 const RegionLink = ({ href, label }) => (
-  <Box px={[1,3]} py={[2,4]}>
+  <Box px={[2,3]} py={[2,2,4]}>
     <StyledRegionLink href={href}>
       <Text fontSize={[16, 20]}>{label}</Text>
     </StyledRegionLink>
@@ -164,12 +164,11 @@ const Countries = ({countries}) => {
       <StyledStickyNavBar>
         <NavBar />
         <RegionMenu>
-      
           <Container>
             <Flex
-              flexDirection={['column', 'row']}
+              flexDirection={['column', 'column', 'row']}
               justifyContent={['flex-start', 'flex-end']}
-              alignItems={['flex-start', 'center']}
+              alignItems={['flex-start', 'flex-start', 'center']}
             >
               <Box my={2}>
                 <Input
@@ -178,12 +177,17 @@ const Countries = ({countries}) => {
                   error={filteredCountries.length === 0}
                 />
               </Box>
-              <RegionLink href={`#${getLocalisedRegionName('002', intl.locale)}`} label={getLocalisedRegionName('002', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('019', intl.locale)}`} label={getLocalisedRegionName('019', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('142', intl.locale)}`} label={getLocalisedRegionName('142', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('150', intl.locale)}`} label={getLocalisedRegionName('150', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('009', intl.locale)}`} label={getLocalisedRegionName('009', intl.locale)} />
-              <RegionLink href={`#${getLocalisedRegionName('AQ', intl.locale)}`} label={getLocalisedRegionName('AQ', intl.locale)} />
+              <Flex
+                flexDirection='row'
+                flexWrap='wrap'
+              >
+                <RegionLink href={`#${getLocalisedRegionName('002', intl.locale)}`} label={getLocalisedRegionName('002', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('019', intl.locale)}`} label={getLocalisedRegionName('019', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('142', intl.locale)}`} label={getLocalisedRegionName('142', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('150', intl.locale)}`} label={getLocalisedRegionName('150', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('009', intl.locale)}`} label={getLocalisedRegionName('009', intl.locale)} />
+                <RegionLink href={`#${getLocalisedRegionName('AQ', intl.locale)}`} label={getLocalisedRegionName('AQ', intl.locale)} />
+              </Flex>
             </Flex>
           </Container>
         </RegionMenu>
diff --git a/pages/domains.js b/pages/domains.js
index 9248b6f09..a1d2ef10f 100644
--- a/pages/domains.js
+++ b/pages/domains.js
@@ -98,15 +98,15 @@ const Domains = () => {
       </StyledStickyNavBar>
       <Container>
         <StyledStickySubMenu>
-          <Flex mt={5} mb={2} justifyContent='space-between' alignItems='baseline'>
-            <Heading h={1} mt={1} mb={0}>
+          <Flex mt={[0, 5]} mb={2} justifyContent='space-between' alignItems='baseline' flexDirection={['column', 'column', 'row']}>
+            <Heading h={1} mt={1} mb={0} fontSize={[4, 5]}>
               {
                 intl.formatMessage({id: 'Domains.Title'})
               } {!!sortedAndFilteredData.length && 
                 <>({new Intl.NumberFormat().format(sortedAndFilteredData.length)})</>
               }
             </Heading>
-            <Flex sx={{gap: 3}}>
+            <Flex sx={{gap: 3}} flexDirection={['column', 'column', 'row']} width={[1, 'auto']}>
               <Box>
                 <Input
                   onChange={(e) => debouncedSearchHandler(e.target.value)}
diff --git a/pages/findings/index.js b/pages/findings/index.js
index 0f2b8e24e..4d2178831 100644
--- a/pages/findings/index.js
+++ b/pages/findings/index.js
@@ -23,8 +23,12 @@ const sortOptions = [
 
 const StyledGrid = styled(Box)`
 display: grid;
-grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+grid-template-columns: 1fr 1fr;
 gap: 24px;
+
+@media screen and (max-width: 48em) {
+  grid-template-columns: 1fr;
+}
 `
 
 const Index = () => {
@@ -94,11 +98,11 @@ const Index = () => {
           <Flex justifyContent="end" mt={3}><NLink href="/findings/dashboard"><Button hollow>{intl.formatMessage({id: 'Findings.Dashboard.ShortTitle'})}</Button></NLink></Flex>
         )}
         <StyledStickySubMenu>
-          <Flex mt={user?.role === 'admin' ? 0 : 5} mb={2} justifyContent='space-between' alignItems='baseline'>
-            <Heading h={1} mt={1} mb={0}>
+          <Flex mt={user?.role === 'admin' ? 0 : [0, 5]} mb={2} justifyContent='space-between' alignItems='baseline' flexDirection={['column', 'column', 'row']}>
+            <Heading h={1} mt={1} mb={0} fontSize={[4, 5]}>
               {intl.formatMessage({id: 'Findings.Index.Title'}, {amount: sortedAndFilteredData.length})}
             </Heading>
-            <Flex sx={{gap: 3}}>
+            <Flex sx={{gap: 3}} flexDirection={['column', 'column', 'row']} width={[1, 'auto']}>
               <Box>
                 <Input
                   onChange={(e) => debouncedSearchHandler(e.target.value)}
diff --git a/pages/networks.js b/pages/networks.js
index 694448de0..83f033642 100644
--- a/pages/networks.js
+++ b/pages/networks.js
@@ -79,15 +79,15 @@ const Networks = () => {
       </StyledStickyNavBar>
       <Container>
         <StyledStickySubMenu>
-          <Flex mt={5} mb={2} justifyContent='space-between' alignItems='baseline'>
-            <Heading h={1} mt={1} mb={0}>
+          <Flex mt={[0, 5]} mb={2} justifyContent='space-between' alignItems='baseline' flexDirection={['column', 'column', 'row']}>
+            <Heading h={1} mt={1} mb={0} fontSize={[4, 5]}>
               {
                 intl.formatMessage({id: 'Networks.Title'})
               } {!!sortedAndFilteredData.length && 
                 <>({new Intl.NumberFormat().format(sortedAndFilteredData.length)})</>
               }
             </Heading>
-            <Flex sx={{gap: 3}}>
+            <Flex sx={{gap: 3}} flexDirection={['column', 'column', 'row']} width={[1, 'auto']}>
               <Box>
                 <Input
                   onChange={(e) => debouncedSearchHandler(e.target.value)}