ui(resources): tweak resource page for mobile

src/components/ResourceBreadcrumb/styles.tsx

@@ -4,6 +4,11 @@ import styled from "styled-components"
 export const ResourceBreadcrumbWrapper = styled.div`
   display: flex;
   align-items: flex-start;
+
+  @media screen and (max-width: 767px) {
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+  }
 `
 
 export const LinkWrapper = styled.div`

src/components/ResourceHeader/index.tsx

@@ -65,9 +65,9 @@ export function ResourceHeader({
       <SC.Title>{title}</SC.Title>
 
       <SC.Top>
-        <StackedAvatars authors={authors} />
         <SC.Meta>
-          {authors.length} contributor{authors.lenght > 1 && "s"}
+          <StackedAvatars authors={authors} /> {authors.length} contributor
+          {authors.lenght > 1 && "s"}
         </SC.Meta>
         <SC.Meta>{dateToHuman}</SC.Meta>
         <SC.Meta>

src/components/ResourceHeader/styles.tsx

@@ -11,6 +11,11 @@ export const ResourceHeaderWrapper = styled.div`
 export const Top = styled.div`
   display: flex;
   align-items: center;
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 `
 
 export const Title = styled.h1`
@@ -22,10 +27,23 @@ export const Title = styled.h1`
 `
 
 export const Meta = styled.div`
+  display: flex;
+  align-items: center;
+
   & + &::before {
     content: "•";
     margin: 0 8px;
   }
+
+  @media screen and (max-width: 767px) {
+    & + & {
+      margin-top: 8px;
+    }
+
+    & + &::before {
+      display: none;
+    }
+  }
 `
 
 const ExtraLinks = styled.div`