fix: enforce responsive web design via CSS word-break and flex-wrap properties (#1544)

#1367

Co-authored-by: Sarkis Kovlekjian <kovlekjian@gmail.com>

Author: owlstronaut

src/components/page-footer.js

@@ -32,7 +32,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
 
   return (
     <>
-      <Box sx={{display: 'flex', alignItems: 'center'}}>
+      <Box sx={{display: 'flex', alignItems: 'center', flexWrap: 'wrap'}}>
         <Text sx={{mr: 2}}>
           {contributors.length} {pluralize('contributor', contributors.length)}
         </Text>

src/mdx/components.js

@@ -180,7 +180,7 @@ export const UnorderedList = styled.ul`
   }
 
   li {
-    word-break: break-all;
+    word-break: break-word;
   }
 
   li > p {
@@ -196,6 +196,7 @@ export const OrderedList = UnorderedList.withComponent('ol')
 
 export const Paragraph = styled.p`
   margin: 0 0 ${themeGet('space.3')};
+  word-break: break-word;
 `
 
 export const Table = styled.table`