From 044cbd39f1b7e50636a20610f6e95eecb75eaa6f Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Fri, 18 Oct 2019 16:58:14 -0400
Subject: [PATCH] Revert "ensure tab text doesn't get cut off if tab titles are
 long (#2619)" (#2654)

This reverts commit 8409dbb4ea93186aa19399e1d3f6351989a846ae.
---
 .../tabs/Comments/Stream/StreamContainer.css  |  37 +-
 .../tabs/Comments/Stream/StreamContainer.tsx  |  97 ++-
 .../renderFeaturedStream.spec.tsx.snap        | 178 +++--
 .../renderCommunityGuidelines.spec.tsx.snap   | 176 +++--
 .../renderMessageBox.spec.tsx.snap            | 704 +++++++++---------
 .../__snapshots__/renderStream.spec.tsx.snap  | 178 +++--
 .../__snapshots__/account.spec.tsx.snap       |  10 +-
 src/core/client/ui/components/Tabs/Tab.tsx    |   2 +-
 .../Tabs/__snapshots__/Tab.spec.tsx.snap      |   2 +-
 .../Tabs/__snapshots__/TabBar.spec.tsx.snap   |   6 +-
 10 files changed, 653 insertions(+), 737 deletions(-)

diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
index 6dbe4f92f..bdd25d92f 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
@@ -8,6 +8,9 @@
 }
 
 .sortMenu {
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 .featuredCommentsInfo {
@@ -19,41 +22,7 @@
 
 .featuredCommentsTabContainer {
   position: relative;
-  overflow: hidden;
 }
-
-.featuredCommentsTabContainer > li {
-  display: block;
-}
-
 .featuredCommentsTab {
   padding-right: 30px !important;
-  width: 100%;
-}
-
-.tabBar {
-  flex: 2;
-  overflow: hidden;
-}
-
-.featuredTabText {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tabListItem {
-  display: block;
-}
-
-.allCommentsTabContainer {
-  overflow: hidden;
-}
-
-.allCommentsTab {
-  width: 100%;
-}
-
-.allCommentsTabText {
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
index fa1005152..1474ecc41 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
@@ -149,68 +149,57 @@ export const StreamContainer: FunctionComponent<Props> = props => {
           />
         )}
         <HorizontalGutter spacing={4} className={styles.tabBarContainer}>
-          <Flex>
-            <TabBar
-              variant="secondary"
-              activeTab={local.commentsTab}
-              onTabClick={onChangeTab}
-              className={cn(styles.tabBar, CLASSES.tabBarComments.$root)}
-            >
-              {featuredCommentsCount > 0 && (
-                <TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
-                  <Flex spacing={1} alignItems="center">
-                    <Localized id="comments-featuredTab">
-                      <span className={styles.featuredTabText}>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"
-                classes={{
-                  root: styles.allCommentsTabContainer,
-                }}
-                className={cn(
-                  styles.allCommentsTab,
-                  CLASSES.tabBarComments.allComments
-                )}
-              >
-                <Flex alignItems="center" spacing={1}>
-                  <Localized id="comments-allCommentsTab">
-                    <span className={styles.allCommentsTabText}>
-                      All Comments
-                    </span>
+          <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}
+          >
+            {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 === "ALL_COMMENTS" ? "primary" : "grey"
+                      local.commentsTab === "FEATURED_COMMENTS"
+                        ? "primary"
+                        : "grey"
                     }
                   >
-                    {allCommentsCount}
+                    {featuredCommentsCount}
                   </Counter>
                 </Flex>
-              </Tab>
-            </TabBar>
-
-            <SortMenu
-              className={styles.sortMenu}
-              orderBy={local.commentsOrderBy}
-              onChange={onChangeOrder}
-              reactionSortLabel={props.settings.reaction.sortLabel}
-            />
-          </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>
           <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 fee0ea822..7aa0df686 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
@@ -9,7 +9,7 @@ exports[`renders comment stream 1`] = `
     role="tablist"
   >
     <li
-      className="Tab-root Tab-root"
+      className="Tab-root"
       id="tab-COMMENTS"
       role="presentation"
     >
@@ -184,106 +184,100 @@ exports[`renders comment stream 1`] = `
         className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
       >
         <div
-          className="Box-root Flex-root Flex-flex"
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
-          <ul
-            className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
-            role="tablist"
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
           >
-            <li
-              className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
-              id="tab-ALL_COMMENTS"
-              role="presentation"
-            >
-              <button
-                aria-controls="tabPane-ALL_COMMENTS"
-                aria-selected={false}
-                className="BaseButton-root Tab-button Tab-secondary StreamContainer-allCommentsTab 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
-                    className="StreamContainer-allCommentsTabText"
-                  >
-                    All Comments
-                  </span>
-                  <span
-                    className="Counter-root Counter-colorGrey Counter-sizeSmall coral coral-counter"
-                  >
-                    <span
-                      className="Counter-text"
-                    >
-                      2
-                    </span>
-                  </span>
-                </div>
-              </button>
-            </li>
-          </ul>
-          <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"
           >
-            <label
-              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              htmlFor="coral-comments-sortMenu"
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              value="CREATED_AT_DESC"
             >
-              Sort By
-            </label>
-            <span
-              className="SelectField-root"
-            >
-              <select
-                className="SelectField-select undefined"
-                id="coral-comments-sortMenu"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
+              <option
                 value="CREATED_AT_DESC"
               >
-                <option
-                  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"
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
               >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
-              </span>
+                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>
-          </div>
+          </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"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    2
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
         <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 b2055fa21..c5c3553d2 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,106 +168,100 @@ exports[`renders comment stream with community guidelines 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root Flex-flex"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
-        <ul
-          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
-          role="tablist"
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
         >
-          <li
-            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
-            id="tab-ALL_COMMENTS"
-            role="presentation"
-          >
-            <button
-              aria-controls="tabPane-ALL_COMMENTS"
-              aria-selected={true}
-              className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab 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
-                  className="StreamContainer-allCommentsTabText"
-                >
-                  All Comments
-                </span>
-                <span
-                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    2
-                  </span>
-                </span>
-              </div>
-            </button>
-          </li>
-        </ul>
-        <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"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
           >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
+            <option
               value="CREATED_AT_DESC"
             >
-              <option
-                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"
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
             >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                expand_more
-              </i>
-            </span>
+              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>
-        </div>
+        </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"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  2
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
       <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 40e3eb208..adb258fa0 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,106 +89,100 @@ exports[`renders message box when commenting disabled 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root Flex-flex"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
-        <ul
-          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
-          role="tablist"
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
         >
-          <li
-            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
-            id="tab-ALL_COMMENTS"
-            role="presentation"
-          >
-            <button
-              aria-controls="tabPane-ALL_COMMENTS"
-              aria-selected={true}
-              className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab 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
-                  className="StreamContainer-allCommentsTabText"
-                >
-                  All Comments
-                </span>
-                <span
-                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    0
-                  </span>
-                </span>
-              </div>
-            </button>
-          </li>
-        </ul>
-        <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"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
           >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
+            <option
               value="CREATED_AT_DESC"
             >
-              <option
-                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"
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
             >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                expand_more
-              </i>
-            </span>
+              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>
-        </div>
+        </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"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -414,106 +408,100 @@ exports[`renders message box when logged in 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root Flex-flex"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
-        <ul
-          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
-          role="tablist"
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
         >
-          <li
-            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
-            id="tab-ALL_COMMENTS"
-            role="presentation"
-          >
-            <button
-              aria-controls="tabPane-ALL_COMMENTS"
-              aria-selected={true}
-              className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab 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
-                  className="StreamContainer-allCommentsTabText"
-                >
-                  All Comments
-                </span>
-                <span
-                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    0
-                  </span>
-                </span>
-              </div>
-            </button>
-          </li>
-        </ul>
-        <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"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
           >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
+            <option
               value="CREATED_AT_DESC"
             >
-              <option
-                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"
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
             >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                expand_more
-              </i>
-            </span>
+              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>
-        </div>
+        </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"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -713,106 +701,100 @@ 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 Flex-flex"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
-        <ul
-          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
-          role="tablist"
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
         >
-          <li
-            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
-            id="tab-ALL_COMMENTS"
-            role="presentation"
-          >
-            <button
-              aria-controls="tabPane-ALL_COMMENTS"
-              aria-selected={true}
-              className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab 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
-                  className="StreamContainer-allCommentsTabText"
-                >
-                  All Comments
-                </span>
-                <span
-                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    0
-                  </span>
-                </span>
-              </div>
-            </button>
-          </li>
-        </ul>
-        <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"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
           >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
+            <option
               value="CREATED_AT_DESC"
             >
-              <option
-                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"
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
             >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                expand_more
-              </i>
-            </span>
+              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>
-        </div>
+        </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"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -919,106 +901,100 @@ exports[`renders message box when story isClosed 1`] = `
       className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
     >
       <div
-        className="Box-root Flex-root Flex-flex"
+        className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
-        <ul
-          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
-          role="tablist"
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
         >
-          <li
-            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
-            id="tab-ALL_COMMENTS"
-            role="presentation"
-          >
-            <button
-              aria-controls="tabPane-ALL_COMMENTS"
-              aria-selected={true}
-              className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab 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
-                  className="StreamContainer-allCommentsTabText"
-                >
-                  All Comments
-                </span>
-                <span
-                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    0
-                  </span>
-                </span>
-              </div>
-            </button>
-          </li>
-        </ul>
-        <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"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
           >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
+            <option
               value="CREATED_AT_DESC"
             >
-              <option
-                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"
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
             >
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                expand_more
-              </i>
-            </span>
+              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>
-        </div>
+        </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"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
       <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 c6f087870..5fc3135f1 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
@@ -9,7 +9,7 @@ exports[`renders comment stream 1`] = `
     role="tablist"
   >
     <li
-      className="Tab-root Tab-root"
+      className="Tab-root"
       id="tab-COMMENTS"
       role="presentation"
     >
@@ -184,106 +184,100 @@ exports[`renders comment stream 1`] = `
         className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
       >
         <div
-          className="Box-root Flex-root Flex-flex"
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
-          <ul
-            className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
-            role="tablist"
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
           >
-            <li
-              className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
-              id="tab-ALL_COMMENTS"
-              role="presentation"
-            >
-              <button
-                aria-controls="tabPane-ALL_COMMENTS"
-                aria-selected={true}
-                className="BaseButton-root Tab-button Tab-secondary Tab-active StreamContainer-allCommentsTab 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
-                    className="StreamContainer-allCommentsTabText"
-                  >
-                    All Comments
-                  </span>
-                  <span
-                    className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
-                  >
-                    <span
-                      className="Counter-text"
-                    >
-                      2
-                    </span>
-                  </span>
-                </div>
-              </button>
-            </li>
-          </ul>
-          <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"
           >
-            <label
-              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              htmlFor="coral-comments-sortMenu"
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              value="CREATED_AT_DESC"
             >
-              Sort By
-            </label>
-            <span
-              className="SelectField-root"
-            >
-              <select
-                className="SelectField-select undefined"
-                id="coral-comments-sortMenu"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
+              <option
                 value="CREATED_AT_DESC"
               >
-                <option
-                  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"
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
               >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
-              </span>
+                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>
-          </div>
+          </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"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    2
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
         <section
           aria-labelledby="tab-ALL_COMMENTS"
           className="coral coral-allComments"
diff --git a/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
index 0fd1bab10..f2b7078db 100644
--- a/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
+++ b/src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`renders the empty settings pane 1`] = `
     role="tablist"
   >
     <li
-      className="Tab-root Tab-root"
+      className="Tab-root"
       id="tab-COMMENTS"
       role="presentation"
     >
@@ -32,7 +32,7 @@ exports[`renders the empty settings pane 1`] = `
       </button>
     </li>
     <li
-      className="Tab-root Tab-root"
+      className="Tab-root"
       id="tab-PROFILE"
       role="presentation"
     >
@@ -110,7 +110,7 @@ exports[`renders the empty settings pane 1`] = `
         role="tablist"
       >
         <li
-          className="Tab-root Tab-root"
+          className="Tab-root"
           id="tab-MY_COMMENTS"
           role="presentation"
         >
@@ -133,7 +133,7 @@ exports[`renders the empty settings pane 1`] = `
           </button>
         </li>
         <li
-          className="Tab-root Tab-root"
+          className="Tab-root"
           id="tab-NOTIFICATIONS"
           role="presentation"
         >
@@ -156,7 +156,7 @@ exports[`renders the empty settings pane 1`] = `
           </button>
         </li>
         <li
-          className="Tab-root Tab-root"
+          className="Tab-root"
           id="tab-ACCOUNT"
           role="presentation"
         >
diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx
index 98f9459f5..ec63ce04a 100644
--- a/src/core/client/ui/components/Tabs/Tab.tsx
+++ b/src/core/client/ui/components/Tabs/Tab.tsx
@@ -56,7 +56,7 @@ class Tab extends React.Component<TabProps> {
 
     return (
       <li
-        className={cn(styles.root, classes.root)}
+        className={styles.root}
         key={tabID}
         id={`tab-${tabID}`}
         role="presentation"
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
index 16873ad89..44c943182 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <li
-  className="Tab-root Tab-root"
+  className="Tab-root"
   id="tab-three"
   role="presentation"
 >
diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
index bc1d0d2eb..06a3d4ece 100644
--- a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
+++ b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`renders correctly 1`] = `
   role="tablist"
 >
   <li
-    className="Tab-root Tab-root"
+    className="Tab-root"
     id="tab-one"
     role="presentation"
   >
@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
     </button>
   </li>
   <li
-    className="Tab-root Tab-root"
+    className="Tab-root"
     id="tab-two"
     role="presentation"
   >
@@ -48,7 +48,7 @@ exports[`renders correctly 1`] = `
     </button>
   </li>
   <li
-    className="Tab-root Tab-root"
+    className="Tab-root"
     id="tab-three"
     role="presentation"
   >