refactor(media-quer): improve user list in modal

Author: mydearxym

components/Modal/styles/index.js

@@ -31,8 +31,8 @@ export const Wrapper = styled.div`
     mode === 'default' ? theme('modal.border') : theme('baseColor.error')};
   animation: ${animate.zoomInRule};
 
-  ${cs.media.mobile`width: 300px`};
-  ${cs.media.mobile`width: 400px`};
+  ${cs.media.tablet`width: 460px`};
+  ${cs.media.mobile`width: 320px`};
 `
 export const ChildrenWrapper = styled.div`
   min-height: 320px;

containers/UserLister/styles/user_list.js

@@ -24,15 +24,23 @@ export const UserAvatar = styled(Img)`
   height: 55px;
   border-radius: 4px;
   display: block;
-`
 
+  ${cs.media.mobile`
+    width: 30px;
+    height: 30px;
+`};
+`
 export const UserBrief = styled.div`
   ${cs.flexColumnGrow('justify-between')};
   margin-left: 18px;
 `
 export const Title = styled.div`
   ${cs.flex('align-center')};
   color: ${theme('thread.articleTitle')};
+
+  ${cs.media.tablet`
+    ${cs.flexColumn('align-start')};
+  `};
 `
 export const Nickname = styled.div`
   font-size: 1rem;
@@ -41,6 +49,18 @@ export const Location = styled.div`
   ${cs.flex('align-center')};
   color: ${theme('thread.articleDigest')};
   margin-left: 10px;
+
+  ${cs.media.tablet`
+    ${cs.truncate('80px')};
+    margin-left: 0;
+    margin-bottom: 3px;
+  `};
+
+  ${cs.media.mobile`
+    ${cs.truncate('60px')};
+    margin-left: 0;
+    margin-bottom: 3px;
+  `};
 `
 export const GeoIcon = styled(Img)`
   fill: ${theme('thread.articleDigest')};