refactor(media-query): improve jobitem city-card and user map

Author: mydearxym

components/JobItem/CompanyInfo.js

@@ -38,8 +38,7 @@ const CompanyInfo = ({
     </TopHalf>
     <Footer>
       &quot;
-      {R.isEmpty(desc) ? '---' : desc}
-      &quot;
+      {R.isEmpty(desc) ? '---' : desc} &quot;
     </Footer>
   </Wrapper>
 )

components/JobItem/styles/company_info.js

@@ -14,11 +14,18 @@ export const TopHalf = styled.div`
 export const BaseInfo = styled.div`
   flex-grow: 1;
   margin-bottom: 6px;
+  ${cs.media.mobile`
+    max-width: 75%;
+`};
 `
 export const CompanyLogo = styled(Img)`
   width: 50px;
   height: 50px;
   border-radius: 4px;
+  ${cs.media.mobile`
+    width: 40px;
+    height: 40px;
+  `};
 `
 export const Header = styled.div``
 export const Middle = styled.div`
@@ -29,12 +36,15 @@ export const Middle = styled.div`
 export const Footer = styled.div`
   font-size: 0.8rem;
   color: ${theme('thread.articleDigest')};
+  ${cs.media.mobile`
+    ${cs.truncate('100px')};
+  `};
 `
 export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 0.9rem;
   ${cs.media.mobile`
-    ${cs.truncate('100px')};
+    ${cs.truncate('90px')};
   `};
 `
 export const StatesWrapper = styled.div`

containers/PostsThread/styles/city_card.js

@@ -25,8 +25,9 @@ export const Wrapper = styled.div`
     cursor: pointer;
   }
   ${cs.media.mobile`
-    width: 160px;
+    width: 140px;
     height: 200px;
+    margin-right: 8px;
   `};
 `
 

containers/UsersThread/styles/index.js

@@ -1,14 +1,16 @@
 import styled from 'styled-components'
 
 // import Img from 'components/Img'
-// import { theme } from 'utils'
+import { cs } from 'utils'
 
 export const Wrapper = styled.div`
   width: 100%;
   position: relative;
+  ${cs.media.mobile`overflow: scroll`};
 `
 export const Title = styled.div``
 
 export const MapWrapper = styled.div`
   width: 100%;
+  ${cs.media.mobile`width: 250%;`};
 `