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] 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