From 9bc41ad020590924c64e34a36d130ae45267fcff Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Tue, 26 Nov 2019 10:01:05 -0500
Subject: [PATCH] [CORL-575] allow line breaks in stream tabs (#2726)

* allow line breaks in stream tabs

* update snaps

* fix specs

* rearrange stream tabs for better mutliline support
---
 .../tabs/Comments/Stream/StreamContainer.css  |  35 +-
 .../tabs/Comments/Stream/StreamContainer.tsx  | 100 ++-
 .../renderFeaturedStream.spec.tsx.snap        | 180 ++---
 .../renderCommunityGuidelines.spec.tsx.snap   | 180 ++---
 .../renderMessageBox.spec.tsx.snap            | 720 +++++++++---------
 .../__snapshots__/renderStream.spec.tsx.snap  | 180 ++---
 src/core/client/ui/components/Tabs/TabBar.css |   1 +
 7 files changed, 730 insertions(+), 666 deletions(-)

diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
index bdd25d92f..fde54b2ba 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
@@ -8,21 +8,40 @@
 }
 
 .sortMenu {
-  position: absolute;
-  right: 0;
-  top: 0;
+  /* same as tab bottom padding */
+  padding-bottom: calc(0.5 * var(--mini-unit) + 3px);
 }
 
-.featuredCommentsInfo {
-  position: absolute;
-  top: 0;
-  right: 4px;
-  height: 100%;
+.fixedTab {
+  max-width: 200px;
+  white-space: normal;
+  text-align: left;
 }
 
 .featuredCommentsTabContainer {
   position: relative;
 }
+
+.featuredCommentsInfo {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .featuredCommentsTab {
+  display: flex;
+  align-items: center;
+}
+
+.tabBarRoot {
+  border: 0;
+}
+
+.tabBarRow {
+  border-bottom: 1px solid var(--palette-divider);
+}
+
+.featuredCommentsTabButton {
   padding-right: 30px !important;
 }
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
index b8a9252f0..8474e557b 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
@@ -60,7 +60,11 @@ const TabWithFeaturedTooltip: FunctionComponent<PropTypesOf<typeof Tab>> = ({
   <div className={styles.featuredCommentsTabContainer}>
     <Tab
       {...props}
+      classes={{
+        secondary: styles.featuredCommentsTabButton,
+      }}
       className={cn(
+        styles.fixedTab,
         CLASSES.tabBarComments.featured,
         styles.featuredCommentsTab
       )}
@@ -169,57 +173,69 @@ export const StreamContainer: FunctionComponent<Props> = props => {
           />
         )}
         <HorizontalGutter spacing={4} className={styles.tabBarContainer}>
-          <SortMenu
-            className={styles.sortMenu}
-            orderBy={local.commentsOrderBy}
-            onChange={onChangeOrder}
-            reactionSortLabel={props.settings.reaction.sortLabel}
-          />
-          <TabBar
-            variant="secondary"
-            activeTab={local.commentsTab}
-            onTabClick={onChangeTab}
-            className={CLASSES.tabBarComments.$root}
+          <Flex
+            direction="row-reverse"
+            alignItems="flex-end"
+            justifyContent="space-between"
+            className={styles.tabBarRow}
           >
-            {featuredCommentsCount > 0 && (
-              <TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
-                <Flex spacing={1} alignItems="center">
-                  <Localized id="comments-featuredTab">
-                    <span>Featured</span>
+            <SortMenu
+              className={styles.sortMenu}
+              orderBy={local.commentsOrderBy}
+              onChange={onChangeOrder}
+              reactionSortLabel={props.settings.reaction.sortLabel}
+            />
+            <TabBar
+              variant="secondary"
+              activeTab={local.commentsTab}
+              onTabClick={onChangeTab}
+              className={cn(CLASSES.tabBarComments.$root, styles.tabBarRoot)}
+            >
+              {featuredCommentsCount > 0 && (
+                <TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
+                  <Flex spacing={1} alignItems="center">
+                    <Localized id="comments-featuredTab">
+                      <span>Featured</span>
+                    </Localized>
+                    <Counter
+                      data-testid="comments-featuredCount"
+                      size="sm"
+                      color={
+                        local.commentsTab === "FEATURED_COMMENTS"
+                          ? "primary"
+                          : "grey"
+                      }
+                    >
+                      {featuredCommentsCount}
+                    </Counter>
+                  </Flex>
+                </TabWithFeaturedTooltip>
+              )}
+              <Tab
+                tabID="ALL_COMMENTS"
+                className={cn(
+                  {
+                    [styles.fixedTab]: featuredCommentsCount > 0,
+                  },
+                  CLASSES.tabBarComments.allComments
+                )}
+              >
+                <Flex alignItems="center" spacing={1}>
+                  <Localized id="comments-allCommentsTab">
+                    <span>All Comments</span>
                   </Localized>
                   <Counter
-                    data-testid="comments-featuredCount"
                     size="sm"
                     color={
-                      local.commentsTab === "FEATURED_COMMENTS"
-                        ? "primary"
-                        : "grey"
+                      local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey"
                     }
                   >
-                    {featuredCommentsCount}
+                    {allCommentsCount}
                   </Counter>
                 </Flex>
-              </TabWithFeaturedTooltip>
-            )}
-            <Tab
-              tabID="ALL_COMMENTS"
-              className={CLASSES.tabBarComments.allComments}
-            >
-              <Flex alignItems="center" spacing={1}>
-                <Localized id="comments-allCommentsTab">
-                  <span>All Comments</span>
-                </Localized>
-                <Counter
-                  size="sm"
-                  color={
-                    local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey"
-                  }
-                >
-                  {allCommentsCount}
-                </Counter>
-              </Flex>
-            </Tab>
-          </TabBar>
+              </Tab>
+            </TabBar>
+          </Flex>
           <TabContent activeTab={local.commentsTab}>
             <TabPane
               className={CLASSES.featuredCommentsTabPane.$root}
diff --git a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
index 6652e439c..0554ce6b3 100644
--- a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
@@ -192,101 +192,105 @@ exports[`renders comment stream 1`] = `
           className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
         >
           <div
-            className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+            className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
           >
-            <label
-              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              htmlFor="coral-comments-sortMenu"
+            <div
+              className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
             >
-              Sort By
-            </label>
-            <span
-              className="SelectField-root"
-            >
-              <select
-                className="SelectField-select undefined"
-                id="coral-comments-sortMenu"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                value="CREATED_AT_DESC"
+              <label
+                className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                htmlFor="coral-comments-sortMenu"
               >
-                <option
+                Sort By
+              </label>
+              <span
+                className="SelectField-root"
+              >
+                <select
+                  className="SelectField-select undefined"
+                  id="coral-comments-sortMenu"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
                   value="CREATED_AT_DESC"
                 >
-                  Newest
-                </option>
-                <option
-                  value="CREATED_AT_ASC"
-                >
-                  Oldest
-                </option>
-                <option
-                  value="REPLIES_DESC"
-                >
-                  Most Replies
-                </option>
-                <option
-                  value="REACTION_DESC"
-                >
-                  Most Respected
-                </option>
-              </select>
-              <span
-                aria-hidden={true}
-                className="SelectField-afterWrapper undefined"
-              >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
-              </span>
-            </span>
-          </div>
-          <ul
-            className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-            role="tablist"
-          >
-            <li
-              className="Tab-root"
-              id="tab-ALL_COMMENTS"
-              role="presentation"
-            >
-              <button
-                aria-controls="tabPane-ALL_COMMENTS"
-                aria-selected={false}
-                className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                role="tab"
-                type="button"
-              >
-                <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-                >
-                  <span>
-                    All Comments
-                  </span>
-                  <span
-                    className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
+                  <option
+                    value="CREATED_AT_DESC"
                   >
-                    <span
-                      className="Counter-text"
-                    >
-                      2
+                    Newest
+                  </option>
+                  <option
+                    value="CREATED_AT_ASC"
+                  >
+                    Oldest
+                  </option>
+                  <option
+                    value="REPLIES_DESC"
+                  >
+                    Most Replies
+                  </option>
+                  <option
+                    value="REACTION_DESC"
+                  >
+                    Most Respected
+                  </option>
+                </select>
+                <span
+                  aria-hidden={true}
+                  className="SelectField-afterWrapper undefined"
+                >
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    expand_more
+                  </i>
+                </span>
+              </span>
+            </div>
+            <ul
+              className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
+              role="tablist"
+            >
+              <li
+                className="Tab-root"
+                id="tab-ALL_COMMENTS"
+                role="presentation"
+              >
+                <button
+                  aria-controls="tabPane-ALL_COMMENTS"
+                  aria-selected={false}
+                  className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  role="tab"
+                  type="button"
+                >
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+                  >
+                    <span>
+                      All Comments
                     </span>
-                  </span>
-                </div>
-              </button>
-            </li>
-          </ul>
+                    <span
+                      className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
+                    >
+                      <span
+                        className="Counter-text"
+                      >
+                        2
+                      </span>
+                    </span>
+                  </div>
+                </button>
+              </li>
+            </ul>
+          </div>
           <section
             aria-labelledby="tab-FEATURED_COMMENTS"
             className="coral coral-featuredComments"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
index a2a02456b..1f6c3e2c3 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
@@ -168,101 +168,105 @@ exports[`renders comment stream with community guidelines 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <div
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
           >
-            <option
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
               value="CREATED_AT_DESC"
             >
-              Newest
-            </option>
-            <option
-              value="CREATED_AT_ASC"
-            >
-              Oldest
-            </option>
-            <option
-              value="REPLIES_DESC"
-            >
-              Most Replies
-            </option>
-            <option
-              value="REACTION_DESC"
-            >
-              Most Respected
-            </option>
-          </select>
-          <span
-            aria-hidden={true}
-            className="SelectField-afterWrapper undefined"
-          >
-            <i
-              aria-hidden="true"
-              className="Icon-root Icon-sm"
-            >
-              expand_more
-            </i>
-          </span>
-        </span>
-      </div>
-      <ul
-        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-        role="tablist"
-      >
-        <li
-          className="Tab-root"
-          id="tab-ALL_COMMENTS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-ALL_COMMENTS"
-            aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <div
-              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-            >
-              <span>
-                All Comments
-              </span>
-              <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+              <option
+                value="CREATED_AT_DESC"
               >
-                <span
-                  className="Counter-text"
-                >
-                  2
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
+              >
+                Oldest
+              </option>
+              <option
+                value="REPLIES_DESC"
+              >
+                Most Replies
+              </option>
+              <option
+                value="REACTION_DESC"
+              >
+                Most Respected
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper undefined"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+        <ul
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
+          role="tablist"
+        >
+          <li
+            className="Tab-root"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
+          >
+            <button
+              aria-controls="tabPane-ALL_COMMENTS"
+              aria-selected={true}
+              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+              >
+                <span>
+                  All Comments
                 </span>
-              </span>
-            </div>
-          </button>
-        </li>
-      </ul>
+                <span
+                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    2
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
index dd1c3171f..c05842306 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
@@ -89,101 +89,105 @@ exports[`renders message box when commenting disabled 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <div
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
           >
-            <option
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
               value="CREATED_AT_DESC"
             >
-              Newest
-            </option>
-            <option
-              value="CREATED_AT_ASC"
-            >
-              Oldest
-            </option>
-            <option
-              value="REPLIES_DESC"
-            >
-              Most Replies
-            </option>
-            <option
-              value="REACTION_DESC"
-            >
-              Most Respected
-            </option>
-          </select>
-          <span
-            aria-hidden={true}
-            className="SelectField-afterWrapper undefined"
-          >
-            <i
-              aria-hidden="true"
-              className="Icon-root Icon-sm"
-            >
-              expand_more
-            </i>
-          </span>
-        </span>
-      </div>
-      <ul
-        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-        role="tablist"
-      >
-        <li
-          className="Tab-root"
-          id="tab-ALL_COMMENTS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-ALL_COMMENTS"
-            aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <div
-              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-            >
-              <span>
-                All Comments
-              </span>
-              <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+              <option
+                value="CREATED_AT_DESC"
               >
-                <span
-                  className="Counter-text"
-                >
-                  0
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
+              >
+                Oldest
+              </option>
+              <option
+                value="REPLIES_DESC"
+              >
+                Most Replies
+              </option>
+              <option
+                value="REACTION_DESC"
+              >
+                Most Respected
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper undefined"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+        <ul
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
+          role="tablist"
+        >
+          <li
+            className="Tab-root"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
+          >
+            <button
+              aria-controls="tabPane-ALL_COMMENTS"
+              aria-selected={true}
+              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+              >
+                <span>
+                  All Comments
                 </span>
-              </span>
-            </div>
-          </button>
-        </li>
-      </ul>
+                <span
+                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    0
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -411,101 +415,105 @@ exports[`renders message box when logged in 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <div
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
           >
-            <option
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
               value="CREATED_AT_DESC"
             >
-              Newest
-            </option>
-            <option
-              value="CREATED_AT_ASC"
-            >
-              Oldest
-            </option>
-            <option
-              value="REPLIES_DESC"
-            >
-              Most Replies
-            </option>
-            <option
-              value="REACTION_DESC"
-            >
-              Most Respected
-            </option>
-          </select>
-          <span
-            aria-hidden={true}
-            className="SelectField-afterWrapper undefined"
-          >
-            <i
-              aria-hidden="true"
-              className="Icon-root Icon-sm"
-            >
-              expand_more
-            </i>
-          </span>
-        </span>
-      </div>
-      <ul
-        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-        role="tablist"
-      >
-        <li
-          className="Tab-root"
-          id="tab-ALL_COMMENTS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-ALL_COMMENTS"
-            aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <div
-              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-            >
-              <span>
-                All Comments
-              </span>
-              <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+              <option
+                value="CREATED_AT_DESC"
               >
-                <span
-                  className="Counter-text"
-                >
-                  0
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
+              >
+                Oldest
+              </option>
+              <option
+                value="REPLIES_DESC"
+              >
+                Most Replies
+              </option>
+              <option
+                value="REACTION_DESC"
+              >
+                Most Respected
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper undefined"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+        <ul
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
+          role="tablist"
+        >
+          <li
+            className="Tab-root"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
+          >
+            <button
+              aria-controls="tabPane-ALL_COMMENTS"
+              aria-selected={true}
+              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+              >
+                <span>
+                  All Comments
                 </span>
-              </span>
-            </div>
-          </button>
-        </li>
-      </ul>
+                <span
+                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    0
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -705,101 +713,105 @@ exports[`renders message box when not logged in 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <div
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
           >
-            <option
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
               value="CREATED_AT_DESC"
             >
-              Newest
-            </option>
-            <option
-              value="CREATED_AT_ASC"
-            >
-              Oldest
-            </option>
-            <option
-              value="REPLIES_DESC"
-            >
-              Most Replies
-            </option>
-            <option
-              value="REACTION_DESC"
-            >
-              Most Respected
-            </option>
-          </select>
-          <span
-            aria-hidden={true}
-            className="SelectField-afterWrapper undefined"
-          >
-            <i
-              aria-hidden="true"
-              className="Icon-root Icon-sm"
-            >
-              expand_more
-            </i>
-          </span>
-        </span>
-      </div>
-      <ul
-        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-        role="tablist"
-      >
-        <li
-          className="Tab-root"
-          id="tab-ALL_COMMENTS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-ALL_COMMENTS"
-            aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <div
-              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-            >
-              <span>
-                All Comments
-              </span>
-              <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+              <option
+                value="CREATED_AT_DESC"
               >
-                <span
-                  className="Counter-text"
-                >
-                  0
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
+              >
+                Oldest
+              </option>
+              <option
+                value="REPLIES_DESC"
+              >
+                Most Replies
+              </option>
+              <option
+                value="REACTION_DESC"
+              >
+                Most Respected
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper undefined"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+        <ul
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
+          role="tablist"
+        >
+          <li
+            className="Tab-root"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
+          >
+            <button
+              aria-controls="tabPane-ALL_COMMENTS"
+              aria-selected={true}
+              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+              >
+                <span>
+                  All Comments
                 </span>
-              </span>
-            </div>
-          </button>
-        </li>
-      </ul>
+                <span
+                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    0
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -906,101 +918,105 @@ exports[`renders message box when story isClosed 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <div
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
           >
-            <option
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
               value="CREATED_AT_DESC"
             >
-              Newest
-            </option>
-            <option
-              value="CREATED_AT_ASC"
-            >
-              Oldest
-            </option>
-            <option
-              value="REPLIES_DESC"
-            >
-              Most Replies
-            </option>
-            <option
-              value="REACTION_DESC"
-            >
-              Most Respected
-            </option>
-          </select>
-          <span
-            aria-hidden={true}
-            className="SelectField-afterWrapper undefined"
-          >
-            <i
-              aria-hidden="true"
-              className="Icon-root Icon-sm"
-            >
-              expand_more
-            </i>
-          </span>
-        </span>
-      </div>
-      <ul
-        className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-        role="tablist"
-      >
-        <li
-          className="Tab-root"
-          id="tab-ALL_COMMENTS"
-          role="presentation"
-        >
-          <button
-            aria-controls="tabPane-ALL_COMMENTS"
-            aria-selected={true}
-            className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            role="tab"
-            type="button"
-          >
-            <div
-              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-            >
-              <span>
-                All Comments
-              </span>
-              <span
-                className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+              <option
+                value="CREATED_AT_DESC"
               >
-                <span
-                  className="Counter-text"
-                >
-                  0
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
+              >
+                Oldest
+              </option>
+              <option
+                value="REPLIES_DESC"
+              >
+                Most Replies
+              </option>
+              <option
+                value="REACTION_DESC"
+              >
+                Most Respected
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper undefined"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+        <ul
+          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
+          role="tablist"
+        >
+          <li
+            className="Tab-root"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
+          >
+            <button
+              aria-controls="tabPane-ALL_COMMENTS"
+              aria-selected={true}
+              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+              >
+                <span>
+                  All Comments
                 </span>
-              </span>
-            </div>
-          </button>
-        </li>
-      </ul>
+                <span
+                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    0
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
index 297c368b5..9d4381a6e 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
@@ -192,101 +192,105 @@ exports[`renders comment stream 1`] = `
           className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
         >
           <div
-            className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+            className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
           >
-            <label
-              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              htmlFor="coral-comments-sortMenu"
+            <div
+              className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
             >
-              Sort By
-            </label>
-            <span
-              className="SelectField-root"
-            >
-              <select
-                className="SelectField-select undefined"
-                id="coral-comments-sortMenu"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                value="CREATED_AT_DESC"
+              <label
+                className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                htmlFor="coral-comments-sortMenu"
               >
-                <option
+                Sort By
+              </label>
+              <span
+                className="SelectField-root"
+              >
+                <select
+                  className="SelectField-select undefined"
+                  id="coral-comments-sortMenu"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
                   value="CREATED_AT_DESC"
                 >
-                  Newest
-                </option>
-                <option
-                  value="CREATED_AT_ASC"
-                >
-                  Oldest
-                </option>
-                <option
-                  value="REPLIES_DESC"
-                >
-                  Most Replies
-                </option>
-                <option
-                  value="REACTION_DESC"
-                >
-                  Most Respected
-                </option>
-              </select>
-              <span
-                aria-hidden={true}
-                className="SelectField-afterWrapper undefined"
-              >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
-              </span>
-            </span>
-          </div>
-          <ul
-            className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments"
-            role="tablist"
-          >
-            <li
-              className="Tab-root"
-              id="tab-ALL_COMMENTS"
-              role="presentation"
-            >
-              <button
-                aria-controls="tabPane-ALL_COMMENTS"
-                aria-selected={true}
-                className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                role="tab"
-                type="button"
-              >
-                <div
-                  className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
-                >
-                  <span>
-                    All Comments
-                  </span>
-                  <span
-                    className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                  <option
+                    value="CREATED_AT_DESC"
                   >
-                    <span
-                      className="Counter-text"
-                    >
-                      2
+                    Newest
+                  </option>
+                  <option
+                    value="CREATED_AT_ASC"
+                  >
+                    Oldest
+                  </option>
+                  <option
+                    value="REPLIES_DESC"
+                  >
+                    Most Replies
+                  </option>
+                  <option
+                    value="REACTION_DESC"
+                  >
+                    Most Respected
+                  </option>
+                </select>
+                <span
+                  aria-hidden={true}
+                  className="SelectField-afterWrapper undefined"
+                >
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    expand_more
+                  </i>
+                </span>
+              </span>
+            </div>
+            <ul
+              className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
+              role="tablist"
+            >
+              <li
+                className="Tab-root"
+                id="tab-ALL_COMMENTS"
+                role="presentation"
+              >
+                <button
+                  aria-controls="tabPane-ALL_COMMENTS"
+                  aria-selected={true}
+                  className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  role="tab"
+                  type="button"
+                >
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+                  >
+                    <span>
+                      All Comments
                     </span>
-                  </span>
-                </div>
-              </button>
-            </li>
-          </ul>
+                    <span
+                      className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
+                    >
+                      <span
+                        className="Counter-text"
+                      >
+                        2
+                      </span>
+                    </span>
+                  </div>
+                </button>
+              </li>
+            </ul>
+          </div>
           <section
             aria-labelledby="tab-ALL_COMMENTS"
             className="coral coral-allComments"
diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css
index 0ba3a25f2..fc7f90bb7 100644
--- a/src/core/client/ui/components/Tabs/TabBar.css
+++ b/src/core/client/ui/components/Tabs/TabBar.css
@@ -2,6 +2,7 @@
   display: flex;
   padding: 0;
   margin: 0;
+  align-items: flex-end;
 }
 
 .primary {