From 04f03b7f3bf10a104c23689ab9717176b8a9d6ad Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Aug 2018 18:36:21 +0200
Subject: [PATCH 1/3] Put ref and root className to first div

---
 .../stream/components/Comment/Comment.css     |   3 +
 .../stream/components/Comment/Comment.tsx     |   2 +-
 .../__snapshots__/Comment.spec.tsx.snap       |   1 +
 .../__snapshots__/TopBar.spec.tsx.snap        |  12 +-
 .../test/__snapshots__/loadMore.spec.tsx.snap | 125 +++++++++++------
 .../__snapshots__/permalinkView.spec.tsx.snap |  62 ++++++---
 .../permalinkViewAssetNotFound.spec.tsx.snap  |   6 +-
 ...permalinkViewCommentNotFound.spec.tsx.snap |  49 ++++---
 .../__snapshots__/renderReplies.spec.tsx.snap |  80 +++++++----
 .../__snapshots__/renderStream.spec.tsx.snap  |  56 +++++---
 .../showAllReplies.spec.tsx.snap              | 127 ++++++++++++------
 src/core/client/ui/components/Flex/Flex.css   |   5 +
 src/core/client/ui/components/Flex/Flex.tsx   |   8 +-
 .../Flex/__snapshots__/Flex.spec.tsx.snap     |  30 +++--
 14 files changed, 376 insertions(+), 190 deletions(-)

diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index c4bf8c532..5c0f67095 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,3 +1,6 @@
+.root {
+  width: 100%;
+}
 .footer {
   margin-top: var(--spacing-unit);
 }
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 932cd7155..b47c8ac02 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -20,7 +20,7 @@ export interface CommentProps {
 
 const Comment: StatelessComponent<CommentProps> = props => {
   return (
-    <div role="article">
+    <div role="article" className={styles.root}>
       <TopBar>
         {props.author &&
           props.author.username && <Username>{props.author.username}</Username>}
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index c86fc9284..d9a3e46f0 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders username and body 1`] = `
 <div
+  className="Comment-root"
   role="article"
 >
   <TopBar>
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
index 6c5348d0b..2e6694137 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly on big screens 1`] = `
-<div>
+<div
+  className="Flex-root TopBar-root"
+>
   <div
-    className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
+    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
   >
     <div>
       Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly on big screens 1`] = `
 `;
 
 exports[`renders correctly on small screens 1`] = `
-<div>
+<div
+  className="Flex-root TopBar-root"
+>
   <div
-    className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
   >
     <div>
       Hello World
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 16b8d5fb6..fc1763910 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loads more comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`loads more comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +135,21 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -158,16 +176,21 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -203,17 +226,23 @@ exports[`loads more comments 1`] = `
 `;
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -281,23 +310,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -324,16 +360,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 372894bc7..3571de705 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
@@ -23,16 +25,21 @@ exports[`renders permalink view 1`] = `
       >
         Show all Comments
       </a>
-      <div>
+      <div
+        className="Flex-root"
+      >
         <div
-          className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+          className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
         >
           <div
+            className="Comment-root"
             role="article"
           >
-            <div>
+            <div
+              className="Flex-root TopBar-root"
+            >
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
               >
                 <span
                   className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -65,17 +72,23 @@ exports[`renders permalink view 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -143,23 +156,30 @@ exports[`show all comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index 63933cb3e..949a40e0c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown asset 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index c9a2bcea8..9b6cf8fa5 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown comment 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
@@ -34,17 +36,23 @@ exports[`renders permalink view with unknown comment 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -112,23 +120,30 @@ exports[`show all comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index f4050b20a..19036209f 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +135,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -159,18 +177,23 @@ exports[`renders comment stream 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-with-replies"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-with-replies"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -196,11 +219,14 @@ exports[`renders comment stream 1`] = `
                         />
                       </div>
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index 7b636050d..9261cbdd0 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +135,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 2ecc359f7..c755ca52b 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -79,23 +85,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -123,18 +136,23 @@ exports[`renders comment stream 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-0"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-0"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -188,17 +206,23 @@ exports[`renders comment stream 1`] = `
 `;
 
 exports[`show all replies 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <span
               className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
@@ -266,23 +290,30 @@ exports[`show all replies 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -310,18 +341,23 @@ exports[`show all replies 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-0"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-0"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -347,11 +383,14 @@ exports[`show all replies 1`] = `
                         />
                       </div>
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 378b4e9ba..1b1c562a1 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,5 +1,10 @@
 .root {
+  width: 100%;
+}
+
+.flex {
   display: flex;
+  width: 100%;
 }
 
 .halfItemGutter {
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index c29bd814c..9e69921c6 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -43,6 +43,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
     itemGutter,
     wrap,
     forwardRef,
+    children,
     ...rest
   } = props;
 
@@ -75,12 +76,13 @@ const Flex: StatelessComponent<InnerProps> = props => {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const classNames: string = cn(classes.root, className, classObject);
+  const rootClassNames: string = cn(classes.root, className);
+  const flexClassNames: string = cn(classes.flex, classObject);
 
   // The first div is required to support nested `Flex` components with itemGutters.
   return (
-    <div>
-      <div ref={forwardRef} className={classNames} {...rest} />
+    <div ref={forwardRef} className={rootClassNames} {...rest}>
+      <div className={flexClassNames}>{children}</div>
     </div>
   );
 };
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
index b1f72d74b..d96f60ebd 100644
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
   >
     <div>
       Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly 1`] = `
 `;
 
 exports[`renders with halfe item gutter 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -25,9 +29,11 @@ exports[`renders with halfe item gutter 1`] = `
 `;
 
 exports[`renders with item gutter 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -37,9 +43,11 @@ exports[`renders with item gutter 1`] = `
 `;
 
 exports[`renders with wrap 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -49,9 +57,11 @@ exports[`renders with wrap 1`] = `
 `;
 
 exports[`renders with wrap reverse 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrapReverse Flex-alignCenter"
+    className="Flex-flex Flex-wrapReverse Flex-alignCenter"
   >
     <div>
       Hello World

From 3f64a0d1a64a14085a92fcd6385242c51e07e926 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Aug 2018 18:40:58 +0200
Subject: [PATCH 2/3] Support double itemGutters

---
 src/core/client/ui/components/Flex/Flex.css | 41 +++++++++++++++++++++
 src/core/client/ui/components/Flex/Flex.mdx | 26 +++++++++++++
 src/core/client/ui/components/Flex/Flex.tsx |  3 +-
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 1b1c562a1..2e6914c7f 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -31,6 +31,30 @@
   }
 }
 
+.doubleItemGutter {
+  & > * {
+    margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
 .itemGutter {
   & > * {
     margin: 0 var(--spacing-unit) 0 0 !important;
@@ -98,6 +122,23 @@
       margin-left: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
+
+  &:not(.directionColumn).doubleItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-2 * var(--spacing-unit)) !important;
+    }
+    & > * {
+      margin-top: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn.doubleItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-2 * var(--spacing-unit)) !important;
+    }
+    &.doubleItemGutter > * {
+      margin-left: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
 }
 
 .justifyFlexStart {
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
index 84eeb8240..7ca59bb54 100644
--- a/src/core/client/ui/components/Flex/Flex.mdx
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -33,3 +33,29 @@ import Button from '../Button'
     <Button variant="filled">Push Me</Button>
   </Flex>
 </Playground>
+
+## Item Gutter
+
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="half">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="double">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index 9e69921c6..bf66f9084 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -25,7 +25,7 @@ interface InnerProps {
     | "space-evenly";
   alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
   direction?: "row" | "column" | "row-reverse" | "column-reverse";
-  itemGutter?: boolean | "half";
+  itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
 
@@ -56,6 +56,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
+    [classes.doubleItemGutter]: itemGutter === "double",
     [classes.wrap]: wrap === true,
     [classes.wrapReverse]: wrap === "reverse",
   };

From 92a266363a0bc4ad47b9a8c6a214a127ae47590e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 9 Aug 2018 19:40:45 +0200
Subject: [PATCH 3/3] Make UserBoxUnauthenticated responsive

---
 package-lock.json                             | 14 +++++-----
 package.json                                  |  2 +-
 src/core/client/embed/index.html              |  2 +-
 .../framework/lib/bootstrap/TalkContext.tsx   |  5 ++++
 .../stream/components/Comment/TopBar.tsx      |  2 +-
 .../stream/components/Comment/Username.tsx    |  2 +-
 .../PermalinkButton/PermalinkButton.tsx       |  2 +-
 .../components/UserBoxUnauthenticated.tsx     | 25 +++++++++--------
 .../UserBoxUnauthenticated.spec.tsx.snap      | 26 ++++++++++--------
 src/core/client/stream/index.tsx              |  4 ++-
 .../test/__snapshots__/loadMore.spec.tsx.snap | 20 --------------
 .../__snapshots__/permalinkView.spec.tsx.snap | 10 -------
 ...permalinkViewCommentNotFound.spec.tsx.snap | 10 -------
 .../__snapshots__/renderReplies.spec.tsx.snap | 10 -------
 .../__snapshots__/renderStream.spec.tsx.snap  | 10 -------
 .../showAllReplies.spec.tsx.snap              | 20 --------------
 .../ui/components/MatchMedia/MatchMedia.mdx   | 14 +++++-----
 .../components/MatchMedia/MatchMedia.spec.tsx | 16 ++++++++---
 .../ui/components/MatchMedia/MatchMedia.tsx   | 27 +++++++++++++++----
 .../__snapshots__/MatchMedia.spec.tsx.snap    | 16 +++++++++--
 20 files changed, 105 insertions(+), 132 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 100de84ee..e2c77a532 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15001,9 +15001,9 @@
       "dev": true
     },
     "matchmediaquery": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
-      "integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
+      "integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
       "dev": true,
       "requires": {
         "css-mediaquery": "^0.1.2"
@@ -19584,13 +19584,13 @@
       }
     },
     "react-responsive": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
-      "integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz",
+      "integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==",
       "dev": true,
       "requires": {
         "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.2.1",
+        "matchmediaquery": "^0.3.0",
         "prop-types": "^15.6.1"
       }
     },
diff --git a/package.json b/package.json
index d546b9c17..afde65a13 100644
--- a/package.json
+++ b/package.json
@@ -176,7 +176,7 @@
     "react-final-form": "^3.6.4",
     "react-popper": "^1.0.0-beta.6",
     "react-relay": "github:coralproject/patched#react-relay",
-    "react-responsive": "^4.1.0",
+    "react-responsive": "^5.0.0",
     "react-test-renderer": "^16.4.1",
     "react-timeago": "^4.1.9",
     "react-with-state-props": "^2.0.4",
diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html
index 10106ff8c..b579dab8f 100644
--- a/src/core/client/embed/index.html
+++ b/src/core/client/embed/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <h1 style="text-align: center" }>Talk 5.0 – Embed Stream</h1>
-  <div id="coralStreamEmbed" style="max-width: 600px; margin: 0 auto"></div>
+  <div id="coralStreamEmbed" style="max-width: 640px; margin: 0 auto"></div>
   <script>
     window.TalkEmbed = Talk.render(document.getElementById('coralStreamEmbed'));
   </script>
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index 90ed10530..75ddc974c 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -2,6 +2,7 @@ import { LocalizationProvider } from "fluent-react/compat";
 import { MessageContext } from "fluent/compat";
 import { Child as PymChild } from "pym.js";
 import React, { StatelessComponent } from "react";
+import { MediaQueryMatchers } from "react-responsive";
 import { Formatter } from "react-timeago";
 import { Environment } from "relay-runtime";
 
@@ -18,6 +19,9 @@ export interface TalkContext {
   /** formatter for timeago. */
   timeagoFormatter?: Formatter;
 
+  /** media query values for testing purposes */
+  mediaQueryValues?: MediaQueryMatchers;
+
   /**
    * A way to listen for clicks that are e.g. outside of the
    * current frame for `ClickOutside`
@@ -48,6 +52,7 @@ export const TalkContextProvider: StatelessComponent<{
         value={{
           timeagoFormatter: value.timeagoFormatter,
           registerClickFarAway: value.registerClickFarAway,
+          mediaQueryValues: value.mediaQueryValues,
         }}
       >
         {children}
diff --git a/src/core/client/stream/components/Comment/TopBar.tsx b/src/core/client/stream/components/Comment/TopBar.tsx
index 2dfe6419d..a82dd0a28 100644
--- a/src/core/client/stream/components/Comment/TopBar.tsx
+++ b/src/core/client/stream/components/Comment/TopBar.tsx
@@ -14,7 +14,7 @@ export interface TopBarProps {
 const TopBar: StatelessComponent<TopBarProps> = props => {
   const rootClassName = cn(styles.root, props.className);
   return (
-    <MatchMedia minWidth="xs">
+    <MatchMedia gtWidth="xs">
       {matches => (
         <Flex
           className={rootClassName}
diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/components/Comment/Username.tsx
index ada04c8ec..f19c23024 100644
--- a/src/core/client/stream/components/Comment/Username.tsx
+++ b/src/core/client/stream/components/Comment/Username.tsx
@@ -11,7 +11,7 @@ export interface UsernameProps {
 
 const Username: StatelessComponent<UsernameProps> = props => {
   return (
-    <MatchMedia minWidth="xs">
+    <MatchMedia gtWidth="xs">
       {matches => (
         <Typography
           variant={matches ? "heading2" : "heading3"}
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
index 493625e2b..4cd4ee7a5 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -57,7 +57,7 @@ class Permalink extends React.Component<PermalinkProps> {
             active={visible}
             size="small"
           >
-            <MatchMedia minWidth="xs">
+            <MatchMedia gtWidth="xs">
               <ButtonIcon>share</ButtonIcon>
             </MatchMedia>
             <Localized id="comments-permalink-share">
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 37a22ee0f..9d838a510 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
 
+import MatchMedia from "talk-ui/components/MatchMedia";
 import * as styles from "./UserBoxUnauthenticated.css";
 
 export interface UserBoxUnauthenticatedProps {
@@ -15,18 +16,20 @@ const UserBoxUnauthenticated: StatelessComponent<
 > = props => {
   return (
     <Flex>
-      <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
-        <Typography
-          className={styles.joinText}
-          variant="bodyCopyBold"
-          component="span"
-        >
-          Join the conversation
+      <MatchMedia gteWidth="sm">
+        <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
+          <Typography
+            className={styles.joinText}
+            variant="bodyCopyBold"
+            component="span"
+          >
+            Join the conversation
+          </Typography>
+        </Localized>
+        <Typography variant="bodyCopyBold" component="span">
+          |
         </Typography>
-      </Localized>
-      <Typography variant="bodyCopyBold" component="span">
-        |
-      </Typography>
+      </MatchMedia>
       <Localized id="comments-userBoxUnauthenticated-signIn">
         <Button color="primary" size="small" onClick={props.onSignIn}>
           Sign in
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index e5b84fc16..9cf950ec6 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -2,23 +2,27 @@
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(Flex)>
-  <Localized
-    id="comments-userBoxUnauthenticated-joinTheConversation"
+  <MatchMediaWithContext
+    gteWidth="sm"
   >
+    <Localized
+      id="comments-userBoxUnauthenticated-joinTheConversation"
+    >
+      <withPropsOnChange(Typography)
+        className="UserBoxUnauthenticated-joinText"
+        component="span"
+        variant="bodyCopyBold"
+      >
+        Join the conversation
+      </withPropsOnChange(Typography)>
+    </Localized>
     <withPropsOnChange(Typography)
-      className="UserBoxUnauthenticated-joinText"
       component="span"
       variant="bodyCopyBold"
     >
-      Join the conversation
+      |
     </withPropsOnChange(Typography)>
-  </Localized>
-  <withPropsOnChange(Typography)
-    component="span"
-    variant="bodyCopyBold"
-  >
-    |
-  </withPropsOnChange(Typography)>
+  </MatchMediaWithContext>
   <Localized
     id="comments-userBoxUnauthenticated-signIn"
   >
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 6d622216e..4ac024d6d 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -32,7 +32,9 @@ async function main() {
   });
 
   const Index: StatelessComponent = () => (
-    <TalkContextProvider value={context}>
+    <TalkContextProvider
+      value={{ ...context, mediaQueryValues: { width: 640 } }}
+    >
       <AppContainer />
     </TalkContextProvider>
   );
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 16b8d5fb6..8f0c81faa 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -13,16 +13,6 @@ exports[`loads more comments 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -215,16 +205,6 @@ exports[`renders comment stream 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 372894bc7..5fc313abb 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -77,16 +77,6 @@ exports[`show all comments 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index c9a2bcea8..e8281b21e 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -46,16 +46,6 @@ exports[`show all comments 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index f4050b20a..0a78273db 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -13,16 +13,6 @@ exports[`renders comment stream 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index 7b636050d..b998f71f8 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -13,16 +13,6 @@ exports[`renders comment stream 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 2ecc359f7..1fc9b2338 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -13,16 +13,6 @@ exports[`renders comment stream 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -200,16 +190,6 @@ exports[`show all replies 1`] = `
           <div
             className="Flex-root Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.mdx b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
index 3f3186bb6..b9a64a328 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
@@ -12,29 +12,29 @@ import MatchMedia from './MatchMedia'
 
 ## Basic usage
 <Playground>
-  <MatchMedia maxWidth="xs">
+  <MatchMedia lteWidth="xs">
     I'm a very small screen
   </MatchMedia>
-  <MatchMedia minWidth="xs" maxWidth="sm">
+  <MatchMedia gtWidth="xs" lteWidth="sm">
     I'm a small screen
   </MatchMedia>
-  <MatchMedia minWidth="sm" maxWidth="md">
+  <MatchMedia gtWidth="sm" lteWidth="md">
     I'm a medium screen
   </MatchMedia>
-  <MatchMedia minWidth="md" maxWidth="lg">
+  <MatchMedia gtWidth="md" lteWidth="lg">
     I'm a large screen
   </MatchMedia>
-  <MatchMedia minWidth="lg" maxWidth="xl">
+  <MatchMedia gtWidth="lg" lteWidth="xl">
     I'm a very large screen
   </MatchMedia>
-  <MatchMedia minWidth="xl">
+  <MatchMedia gtWidth="xl">
     I'm a super large screen
   </MatchMedia>
 </Playground>
 
 ## Using render props
 <Playground>
-  <MatchMedia minWidth="lg">
+  <MatchMedia lteWidth="lg">
     {matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
   </MatchMedia>
 </Playground>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
index 6f53df511..1b4ded65e 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
@@ -9,8 +9,8 @@ import { default as MatchMediaWithContext, MatchMedia } from "./MatchMedia";
 
 it("renders correctly", () => {
   const props: PropTypesOf<typeof MatchMedia> = {
-    minWidth: "xs",
-    maxWidth: "sm",
+    lteWidth: "xs",
+    gteWidth: "sm",
     component: "div",
     screen: true,
     children: <div>Hello World</div>,
@@ -19,6 +19,16 @@ it("renders correctly", () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it("renders less than and great than correctly", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    ltWidth: "xs",
+    gtWidth: "sm",
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
 it("map new speech prop to older aural prop", () => {
   const props: PropTypesOf<typeof MatchMedia> = {
     speech: true,
@@ -37,7 +47,7 @@ it("should get mediaQueryValues from context", () => {
   };
   const wrapper = mount(
     <UIContext.Provider value={context}>
-      <MatchMediaWithContext maxWidth="xs">
+      <MatchMediaWithContext lteWidth="xs">
         <span>Hello World</span>
       </MatchMediaWithContext>
     </UIContext.Provider>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
index 8df6cff34..677e558bc 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
@@ -10,8 +10,17 @@ import UIContext from "../UIContext";
 type Breakpoints = keyof typeof theme.breakpoints;
 
 interface InnerProps {
-  minWidth?: Breakpoints;
-  maxWidth?: Breakpoints;
+  /** greater than or equal width. */
+  gteWidth?: Breakpoints;
+
+  /** greater than width. */
+  gtWidth?: Breakpoints;
+
+  /** less than equals width. */
+  lteWidth?: Breakpoints;
+
+  /** less than equals width. */
+  ltWidth?: Breakpoints;
   children: ReactNode | ((matches: boolean) => React.ReactNode);
   className?: string;
   component?:
@@ -27,13 +36,21 @@ interface InnerProps {
 }
 
 export const MatchMedia: StatelessComponent<InnerProps> = props => {
-  const { speech, minWidth, maxWidth, ...rest } = props;
+  const { speech, gteWidth, gtWidth, lteWidth, ltWidth, ...rest } = props;
   const mapped = {
     // TODO: Temporarily map newer speech to older aural type until
     // react-responsive supports the speech prop.
     aural: speech,
-    minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
-    maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
+    minWidth: gtWidth
+      ? theme.breakpoints[gtWidth] + 1
+      : gteWidth
+        ? theme.breakpoints[gteWidth]
+        : undefined,
+    maxWidth: ltWidth
+      ? theme.breakpoints[ltWidth] - 1
+      : lteWidth
+        ? theme.breakpoints[lteWidth]
+        : undefined,
   };
   return <Responsive {...rest} {...mapped} />;
 };
diff --git a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
index a128d4ba0..88670e33f 100644
--- a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
+++ b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
@@ -14,8 +14,8 @@ exports[`map new speech prop to older aural prop 1`] = `
 exports[`renders correctly 1`] = `
 <MediaQuery
   component="div"
-  maxWidth={640}
-  minWidth={321}
+  maxWidth={320}
+  minWidth={640}
   screen={true}
   values={Object {}}
 >
@@ -24,3 +24,15 @@ exports[`renders correctly 1`] = `
   </div>
 </MediaQuery>
 `;
+
+exports[`renders less than and great than correctly 1`] = `
+<MediaQuery
+  maxWidth={319}
+  minWidth={641}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;