Styling, refactor + tests

src/core/client/stream/components/App.css

@@ -1,8 +1,8 @@
 /* Here we add global stylings for body and document */
 :global {
   body {
-    margin: "0";
-    padding: 2px;
+    margin: 0;
+    padding: 2px 8px;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;

src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap

@@ -1,21 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly on big screens 1`] = `
-<div
-  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders correctly on small screens 1`] = `
-<div
-  className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;

src/core/client/stream/components/UserBoxUnauthenticated.spec.tsx

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
+    onSignIn: noop,
+    onRegister: noop,
+  };
+  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/components/UserBoxUnauthenticated.tsx

@@ -2,14 +2,16 @@ import React, { StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
 
-import * as styles from "./UserBox.css";
+import * as styles from "./UserBoxUnauthenticated.css";
 
-export interface UserBoxProps {
+export interface UserBoxUnauthenticatedProps {
   onSignIn: () => void;
   onRegister: () => void;
 }
 
-const UserBox: StatelessComponent<UserBoxProps> = props => {
+const UserBoxUnauthenticated: StatelessComponent<
+  UserBoxUnauthenticatedProps
+> = props => {
   return (
     <Flex>
       <Typography
@@ -37,4 +39,4 @@ const UserBox: StatelessComponent<UserBoxProps> = props => {
   );
 };
 
-export default UserBox;
+export default UserBoxUnauthenticated;

src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)>
+  <withPropsOnChange(Typography)
+    className="UserBoxUnauthenticated-joinText"
+    component="span"
+    variant="bodyCopyBold"
+  >
+    Join the conversation
+  </withPropsOnChange(Typography)>
+  <withPropsOnChange(Typography)
+    component="span"
+    variant="bodyCopyBold"
+  >
+    |
+  </withPropsOnChange(Typography)>
+  <withPropsOnChange(Button)
+    color="primary"
+    onClick={[Function]}
+    size="small"
+  >
+    Sign In
+  </withPropsOnChange(Button)>
+  <withPropsOnChange(Button)
+    color="primary"
+    onClick={[Function]}
+    size="small"
+    variant="outlined"
+  >
+    Register
+  </withPropsOnChange(Button)>
+</withPropsOnChange(Flex)>
+`;

src/core/client/stream/containers/UserBoxContainer.spec.tsx

@@ -0,0 +1,24 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { UserBoxContainer } from "./UserBoxContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<UserBoxContainer> = {
+    local: {
+      authPopup: {
+        open: false,
+        focus: false,
+        view: "SIGN_IN",
+      },
+    },
+    // tslint:disable-next-line:no-empty
+    showAuthPopup: async () => {},
+    // tslint:disable-next-line:no-empty
+    setAuthPopupState: async () => {},
+  };
+  const wrapper = shallow(<UserBoxContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/containers/UserBoxContainer.tsx

@@ -11,7 +11,7 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBox from "../components/UserBox";
+import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
 
 interface InnerProps {
   local: Local;
@@ -19,7 +19,7 @@ interface InnerProps {
   setAuthPopupState: SetAuthPopupStateMutation;
 }
 
-class UserBoxContainer extends Component<InnerProps> {
+export class UserBoxContainer extends Component<InnerProps> {
   private handleFocus = () => this.props.setAuthPopupState({ focus: true });
   private handleBlur = () => this.props.setAuthPopupState({ focus: false });
   private handleClose = () => this.props.setAuthPopupState({ open: false });
@@ -44,7 +44,7 @@ class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        <UserBox
+        <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
         />

src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<React.Fragment>
+  <Popup
+    features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+    focus={false}
+    href="/auth.html?view=SIGN_IN"
+    onBlur={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    open={false}
+    title="Talk Auth"
+  />
+  <UserBoxUnauthenticated
+    onRegister={[Function]}
+    onSignIn={[Function]}
+  />
+</React.Fragment>
+`;

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -1,180 +1,200 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loads more comments 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign In
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-            >
-              Lukas
-            </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:20:00.000Z"
-              title="2018-07-06T18:20:00.000Z"
-            >
-              2018-07-06T18:20:00.000Z
-            </time>
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            What's up?
-          </p>
           <div
-            className="Comment-footer"
-          />
-        </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="PostCommentForm-postButtonContainer"
           >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
             >
-              Isabelle
-            </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:14:00.000Z"
-              title="2018-07-06T18:14:00.000Z"
-            >
-              2018-07-06T18:14:00.000Z
-            </time>
+              Post
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Hey!
-          </p>
+        </form>
+        <div>
           <div
-            className="Comment-footer"
-          />
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Lukas
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:20:00.000Z"
+                        title="2018-07-06T18:20:00.000Z"
+                      >
+                        2018-07-06T18:20:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    What's up?
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Isabelle
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:14:00.000Z"
+                        title="2018-07-06T18:14:00.000Z"
+                      >
+                        2018-07-06T18:14:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Hey!
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -183,165 +203,181 @@ exports[`loads more comments 1`] = `
 `;
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
-            >
-              2018-07-06T18:24:00.000Z
-            </time>
-          </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
-        </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              Lukas
+              |
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:20:00.000Z"
-              title="2018-07-06T18:20:00.000Z"
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
             >
-              2018-07-06T18:20:00.000Z
-            </time>
+              Sign In
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            What's up?
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Lukas
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:20:00.000Z"
+                        title="2018-07-06T18:20:00.000Z"
+                      >
+                        2018-07-06T18:20:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    What's up?
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <button
+              aria-controls="talk-comments-stream-log"
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+              disabled={false}
+              id="talk-comments-stream-loadMore"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Load More
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        aria-controls="talk-comments-stream-log"
-        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-        disabled={false}
-        id="talk-comments-stream-loadMore"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Load More
-      </button>
     </div>
   </div>
 </div>

src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap

@@ -1,55 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="PermalinkView-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <button
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
-    >
-      Show all Comments
-    </button>
     <div
-      className="Flex-root Flex-alignFlexStart Flex-directionColumn"
+      className="PermalinkView-root"
     >
-      <div
-        role="article"
+      <button
+        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+        id="talk-comments-permalinkView-showAllComments"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
       >
+        Show all Comments
+      </button>
+      <div>
         <div
-          className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
         >
-          <span
-            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          <div
+            role="article"
           >
-            Markus
-          </span>
-          <time
-            className="Timestamp-root RelativeTime-root"
-            dateTime="2018-07-06T18:24:00.000Z"
-            title="2018-07-06T18:24:00.000Z"
-          >
-            2018-07-06T18:24:00.000Z
-          </time>
+            <div>
+              <div
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+            </div>
+            <p
+              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            >
+              Joining Too
+            </p>
+            <div
+              className="Comment-footer"
+            />
+          </div>
         </div>
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-        >
-          Joining Too
-        </p>
-        <div
-          className="Comment-footer"
-        />
       </div>
     </div>
   </div>
@@ -57,116 +63,128 @@ exports[`renders permalink view 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign In
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap

@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown asset 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="PermalinkView-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    <div
+      className="PermalinkView-root"
     >
-      Comment not found
-    </p>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Comment not found
+      </p>
+    </div>
   </div>
 </div>
 `;

src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap

@@ -1,145 +1,159 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown comment 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="PermalinkView-root"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <button
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
+    <div
+      className="PermalinkView-root"
     >
-      Show all Comments
-    </button>
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-    >
-      Comment not found
-    </p>
+      <button
+        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+        id="talk-comments-permalinkView-showAllComments"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+      >
+        Show all Comments
+      </button>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Comment not found
+      </p>
+    </div>
   </div>
 </div>
 `;
 
 exports[`show all comments 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign In
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -1,212 +1,234 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
-            >
-              2018-07-06T18:24:00.000Z
-            </time>
-          </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
-        </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              Markus
+              |
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              Sign In
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            I like yoghurt
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-        <div
-          className="Indent-root Indent-level0"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
           <div
-            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-replyList-log--comment-with-replies"
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
             role="log"
           >
-            <div
-              role="article"
-            >
+            <div>
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  role="article"
                 >
-                  Markus
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:24:00.000Z"
-                  title="2018-07-06T18:24:00.000Z"
-                >
-                  2018-07-06T18:24:00.000Z
-                </time>
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
               </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                Joining Too
-              </p>
-              <div
-                className="Comment-footer"
-              />
             </div>
-            <div
-              role="article"
-            >
+            <div>
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  role="article"
                 >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    I like yoghurt
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+                <div
+                  className="Indent-root Indent-level0"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <div>
+                    <div
+                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                      id="talk-comments-replyList-log--comment-with-replies"
+                      role="log"
+                    >
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Markus
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          Joining Too
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Lukas
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:20:00.000Z"
+                              title="2018-07-06T18:20:00.000Z"
+                            >
+                              2018-07-06T18:20:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          What's up?
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                What's up?
-              </p>
-              <div
-                className="Comment-footer"
-              />
             </div>
           </div>
         </div>

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -1,148 +1,164 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign In
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-      </div>
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
-          <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-          >
-            <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-            >
-              Lukas
-            </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:20:00.000Z"
-              title="2018-07-06T18:20:00.000Z"
-            >
-              2018-07-06T18:20:00.000Z
-            </time>
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            What's up?
-          </p>
           <div
-            className="Comment-footer"
-          />
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Lukas
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:20:00.000Z"
+                        title="2018-07-06T18:20:00.000Z"
+                      >
+                        2018-07-06T18:20:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    What's up?
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -1,158 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
-          </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
-        </div>
-        <div
-          className="Indent-root Indent-level0"
-        >
-          <div
-            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
-          >
-            <div
-              role="article"
-            >
-              <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
-                >
-                  2018-07-06T18:20:00.000Z
-                </time>
-              </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                What's up?
-              </p>
-              <div
-                className="Comment-footer"
-              />
-            </div>
+              |
+            </span>
             <button
-              aria-controls="talk-comments-replyList-log--comment-0"
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-              disabled={false}
-              id="talk-comments-replyList-showAll--comment-0"
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
@@ -161,8 +33,152 @@ exports[`renders comment stream 1`] = `
               onMouseOver={[Function]}
               onTouchEnd={[Function]}
             >
-              Show All Replies
+              Sign In
             </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
+          </div>
+        </div>
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
+        >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
+          <div
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
+            role="log"
+          >
+            <div>
+              <div
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+              >
+                <div
+                  role="article"
+                >
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+                <div
+                  className="Indent-root Indent-level0"
+                >
+                  <div>
+                    <div
+                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                      id="talk-comments-replyList-log--comment-0"
+                      role="log"
+                    >
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Lukas
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:20:00.000Z"
+                              title="2018-07-06T18:20:00.000Z"
+                            >
+                              2018-07-06T18:20:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          What's up?
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                      <button
+                        aria-controls="talk-comments-replyList-log--comment-0"
+                        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+                        disabled={false}
+                        id="talk-comments-replyList-showAll--comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                      >
+                        Show All Replies
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -172,180 +188,198 @@ exports[`renders comment stream 1`] = `
 `;
 
 exports[`show all replies 1`] = `
-<div
-  className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
->
+<div>
   <div
-    className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
+    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div
-      className="Flex-root Flex-alignCenter"
-    >
-      <span
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-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]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Sign In
-      </button>
-      <button
-        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-      >
-        Register
-      </button>
-    </div>
-    <form
-      autoComplete="off"
-      className="PostCommentForm-root"
-      onSubmit={[Function]}
-    >
-      <div>
-        <textarea
-          className="PostCommentForm-textarea"
-          name="body"
-          onChange={[Function]}
-          value=""
-        />
-      </div>
+    <div>
       <div
-        className="PostCommentForm-postButtonContainer"
+        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          disabled={false}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-        >
-          Post
-        </button>
-      </div>
-    </form>
-    <div
-      aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      id="talk-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-      >
-        <div
-          role="article"
-        >
+        <div>
           <div
-            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            className="Flex-root Flex-wrap Flex-alignCenter"
           >
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
             >
-              Markus
+              Join the conversation
             </span>
-            <time
-              className="Timestamp-root RelativeTime-root"
-              dateTime="2018-07-06T18:24:00.000Z"
-              title="2018-07-06T18:24:00.000Z"
+            <span
+              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
-              2018-07-06T18:24:00.000Z
-            </time>
+              |
+            </span>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Sign In
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Register
+            </button>
           </div>
-          <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Joining Too
-          </p>
-          <div
-            className="Comment-footer"
-          />
         </div>
-        <div
-          className="Indent-root Indent-level0"
+        <form
+          autoComplete="off"
+          className="PostCommentForm-root"
+          onSubmit={[Function]}
         >
+          <div>
+            <textarea
+              className="PostCommentForm-textarea"
+              name="body"
+              onChange={[Function]}
+              value=""
+            />
+          </div>
           <div
-            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-replyList-log--comment-0"
+            className="PostCommentForm-postButtonContainer"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+            >
+              Post
+            </button>
+          </div>
+        </form>
+        <div>
+          <div
+            aria-live="polite"
+            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            id="talk-comments-stream-log"
             role="log"
           >
-            <div
-              role="article"
-            >
+            <div>
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                <div
+                  role="article"
                 >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
+                  <div>
+                    <div
+                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
+                      >
+                        2018-07-06T18:24:00.000Z
+                      </time>
+                    </div>
+                  </div>
+                  <p
+                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  >
+                    Joining Too
+                  </p>
+                  <div
+                    className="Comment-footer"
+                  />
+                </div>
+                <div
+                  className="Indent-root Indent-level0"
                 >
-                  2018-07-06T18:20:00.000Z
-                </time>
+                  <div>
+                    <div
+                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                      id="talk-comments-replyList-log--comment-0"
+                      role="log"
+                    >
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Lukas
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:20:00.000Z"
+                              title="2018-07-06T18:20:00.000Z"
+                            >
+                              2018-07-06T18:20:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          What's up?
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                      <div
+                        role="article"
+                      >
+                        <div>
+                          <div
+                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                          >
+                            <span
+                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            >
+                              Isabelle
+                            </span>
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:14:00.000Z"
+                              title="2018-07-06T18:14:00.000Z"
+                            >
+                              2018-07-06T18:14:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <p
+                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                        >
+                          Hey!
+                        </p>
+                        <div
+                          className="Comment-footer"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                What's up?
-              </p>
-              <div
-                className="Comment-footer"
-              />
-            </div>
-            <div
-              role="article"
-            >
-              <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Isabelle
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:14:00.000Z"
-                  title="2018-07-06T18:14:00.000Z"
-                >
-                  2018-07-06T18:14:00.000Z
-                </time>
-              </div>
-              <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-              >
-                Hey!
-              </p>
-              <div
-                className="Comment-footer"
-              />
             </div>
           </div>
         </div>

src/core/client/ui/components/Button/Button.mdx

@@ -13,7 +13,7 @@ import Flex from '../Flex'
 
 ## Regular Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button>Push Me</Button>
     <Button size="small">Push Me</Button>
     <Button size="large">Push Me</Button>
@@ -29,7 +29,7 @@ import Flex from '../Flex'
 
 ## Filled Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button variant="filled">Push Me</Button>
     <Button variant="filled" size="small">Push Me</Button>
     <Button variant="filled" size="large">Push Me</Button>
@@ -45,7 +45,7 @@ import Flex from '../Flex'
 
 ## Outlined Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button variant="outlined">Push Me</Button>
     <Button variant="outlined" size="small">Push Me</Button>
     <Button variant="outlined" size="large">Push Me</Button>
@@ -61,7 +61,7 @@ import Flex from '../Flex'
 
 ## Ghost Button
 <Playground>
-  <Flex itemGutter wrap>
+  <Flex itemGutter>
     <Button variant="ghost">Push Me</Button>
     <Button variant="ghost" size="small">Push Me</Button>
     <Button variant="ghost" size="large">Push Me</Button>

src/core/client/ui/components/Flex/Flex.css

@@ -60,7 +60,7 @@
 
 .wrap,
 .wrapReverse {
-  &.itemGutter {
+  &:not(.directionColumn).itemGutter {
     &:not(:empty) {
       margin-top: calc(-1 * var(--spacing-unit)) !important;
     }
@@ -77,7 +77,7 @@
     }
   }
 
-  &.halfItemGutter {
+  &:not(.directionColumn).halfItemGutter {
     &:not(:empty) {
       margin-top: calc(-0.5 * var(--spacing-unit)) !important;
     }

src/core/client/ui/components/Flex/Flex.tsx

@@ -77,7 +77,12 @@ const Flex: StatelessComponent<InnerProps> = props => {
 
   const classNames: string = cn(classes.root, className, classObject);
 
-  return <div ref={forwardRef} className={classNames} {...rest} />;
+  // The first div is required to support nested `Flex` components with itemGutters.
+  return (
+    <div>
+      <div ref={forwardRef} className={classNames} {...rest} />
+    </div>
+  );
 };
 
 Flex.defaultProps = {

src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap

@@ -1,51 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
-  className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with halfe item gutter 1`] = `
-<div
-  className="Flex-root Flex-halfItemGutter Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with item gutter 1`] = `
-<div
-  className="Flex-root Flex-itemGutter Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with wrap 1`] = `
-<div
-  className="Flex-root Flex-wrap Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrap Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;
 
 exports[`renders with wrap reverse 1`] = `
-<div
-  className="Flex-root Flex-wrapReverse Flex-alignCenter"
->
-  <div>
-    Hello World
+<div>
+  <div
+    className="Flex-root Flex-wrapReverse Flex-alignCenter"
+  >
+    <div>
+      Hello World
+    </div>
   </div>
 </div>
 `;