From 334c8933c95a9fa965868064b3c18da440d8f923 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 21:02:43 +0200
Subject: [PATCH] Update snapshots

---
 .../test/__snapshots__/loadMore.spec.tsx.snap | 622 ++++++++----------
 .../__snapshots__/permalinkView.spec.tsx.snap | 286 ++++----
 .../permalinkViewAssetNotFound.spec.tsx.snap  |  48 +-
 ...permalinkViewCommentNotFound.spec.tsx.snap | 238 +++----
 .../__snapshots__/renderReplies.spec.tsx.snap | 374 +++++------
 .../__snapshots__/renderStream.spec.tsx.snap  | 252 +++----
 .../showAllReplies.spec.tsx.snap              | 598 ++++++++---------
 src/core/client/stream/test/loadMore.spec.tsx |  10 +-
 .../client/stream/test/permalinkView.spec.tsx |  10 +-
 .../test/permalinkViewAssetNotFound.spec.tsx  |  10 +-
 .../permalinkViewCommentNotFound.spec.tsx     |  10 +-
 .../client/stream/test/renderReplies.spec.tsx |  10 +-
 .../client/stream/test/renderStream.spec.tsx  |  10 +-
 .../stream/test/showAllReplies.spec.tsx       |  10 +-
 14 files changed, 1120 insertions(+), 1368 deletions(-)

diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 29631dfac..4c5ee4a94 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -2,212 +2,170 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <div
-              className="Flex-root"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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
-              className="Flex-root"
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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>
+              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>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-flex 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>
@@ -217,189 +175,155 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
-            Sign in and join the conversation
-          </button>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
+            Joining Too
+          </p>
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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]}
-              type="button"
-            >
-              Load More
-            </button>
-          </div>
+            className="Comment-footer"
+          />
         </div>
       </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-flex 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>
+      </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]}
+        type="button"
+      >
+        Load More
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 9a449985f..524244383 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -2,71 +2,55 @@
 
 exports[`renders permalink view 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
+    >
+      Show all Comments
+    </a>
     <div
-      className="PermalinkView-root"
+      className="Comment-root"
+      role="article"
     >
-      <a
-        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-        href="http://localhost/"
-        id="talk-comments-permalinkView-showAllComments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        target="_parent"
-        type="button"
-      >
-        Show all Comments
-      </a>
       <div
-        className="Flex-root"
+        className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
       >
-        <div
-          className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        <span
+          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
         >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root TopBar-root"
-            >
-              <div
-                className="Flex-flex 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>
+          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>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Joining Too
+      </p>
+      <div
+        className="Comment-footer"
+      />
     </div>
   </div>
 </div>
@@ -74,130 +58,104 @@ exports[`renders permalink view 1`] = `
 
 exports[`show all comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
-            Sign in and join the conversation
-          </button>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
+            Joining Too
+          </p>
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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>
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index 16f5c0b99..d3485ab1c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -2,36 +2,32 @@
 
 exports[`renders permalink view with unknown asset 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <div
-      className="PermalinkView-root"
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
     >
-      <a
-        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-        href="http://localhost/"
-        id="talk-comments-permalinkView-showAllComments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        target="_parent"
-        type="button"
-      >
-        Show all Comments
-      </a>
-      <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-      >
-        Comment not found
-      </p>
-    </div>
+      Show all Comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index b6f816dbc..b211d8810 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -2,166 +2,136 @@
 
 exports[`renders permalink view with unknown comment 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <div
-      className="PermalinkView-root"
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
     >
-      <a
-        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-        href="http://localhost/"
-        id="talk-comments-permalinkView-showAllComments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        target="_parent"
-        type="button"
-      >
-        Show all Comments
-      </a>
-      <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-      >
-        Comment not found
-      </p>
-    </div>
+      Show all Comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </div>
 </div>
 `;
 
 exports[`show all comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
-            Sign in and join the conversation
-          </button>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
+            Joining Too
+          </p>
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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>
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 6ff0be849..a55ba40a0 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -2,249 +2,203 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter 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>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            I like yoghurt
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-with-replies"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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>
+                  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>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                Joining Too
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-with-replies"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex 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="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex 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>
+                  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>
           </div>
         </div>
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index d3d07bb71..33f8dcf13 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -2,171 +2,137 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <div
-              className="Flex-root"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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
-              className="Flex-root"
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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>
+              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>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 63af12a8a..8d5418b63 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -2,192 +2,158 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-0"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex 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]}
-                        type="button"
-                      >
-                        Show All Replies
-                      </button>
-                    </div>
-                  </div>
-                </div>
+                  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>
+            <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]}
+              type="button"
+            >
+              Show All Replies
+            </button>
           </div>
         </div>
       </div>
@@ -198,208 +164,170 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          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]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and join the conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
-              type="button"
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              placeholder="Post a comment"
-              value=""
-            />
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in and join the conversation
-          </button>
-        </form>
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex 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"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-0"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex 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
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex 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>
+                  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>
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-flex 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>
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
index afe07b39f..1a162a572 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -4,6 +4,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -65,13 +68,18 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord, source) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue(assetStub.id, "assetID");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/permalinkView.spec.tsx
index 1d1dc7843..03e5dfcff 100644
--- a/src/core/client/stream/test/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/permalinkView.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -49,6 +52,7 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue(commentStub.id, "commentID");
   },
@@ -56,7 +60,11 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
index 17be1416e..d87f62d1e 100644
--- a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
@@ -4,6 +4,9 @@ import { RecordProxy } from "relay-runtime";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -20,6 +23,7 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue("unknown-asset-id", "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
   },
@@ -27,7 +31,11 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
index 0375a9803..4c115b5bd 100644
--- a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -47,12 +50,17 @@ const environment = createEnvironment({
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
index 468317624..da5f138c2 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -26,12 +29,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetWithReplies.id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
index 361f6e2c2..9a1eb8da7 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -26,12 +29,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assets[0].id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
index 7bf111990..632cf4c90 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -83,12 +86,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(