From 8409dbb4ea93186aa19399e1d3f6351989a846ae Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Tue, 15 Oct 2019 16:49:37 -0400
Subject: [PATCH] ensure tab text doesn't get cut off if tab titles are long
 (#2619)

---
 .../tabs/Comments/Stream/StreamContainer.css  |  37 +-
 .../tabs/Comments/Stream/StreamContainer.tsx  |  97 +--
 .../renderFeaturedStream.spec.tsx.snap        | 180 ++---
 .../renderCommunityGuidelines.spec.tsx.snap   | 178 ++---
 .../renderMessageBox.spec.tsx.snap            | 712 +++++++++---------
 .../__snapshots__/renderStream.spec.tsx.snap  | 180 ++---
 .../__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, 744 insertions(+), 660 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..6dbe4f92f 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
@@ -8,9 +8,6 @@
 }
 
 .sortMenu {
-  position: absolute;
-  right: 0;
-  top: 0;
 }
 
 .featuredCommentsInfo {
@@ -22,7 +19,41 @@
 
 .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 4d1712a11..7309d4457 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
@@ -147,57 +147,68 @@ 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}
-          >
-            {featuredCommentsCount > 0 && (
-              <TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
-                <Flex spacing={1} alignItems="center">
-                  <Localized id="comments-featuredTab">
-                    <span>Featured</span>
+          <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>
                   </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>
+
+            <SortMenu
+              className={styles.sortMenu}
+              orderBy={local.commentsOrderBy}
+              onChange={onChangeOrder}
+              reactionSortLabel={props.settings.reaction.sortLabel}
+            />
+          </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 1a96e0697..ac52fdd48 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"
+      className="Tab-root Tab-root"
       id="tab-COMMENTS"
       role="presentation"
     >
@@ -184,100 +184,106 @@ 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 Flex-flex"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
+          <ul
+            className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
+            role="tablist"
           >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              value="CREATED_AT_DESC"
+            <li
+              className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
+              id="tab-ALL_COMMENTS"
+              role="presentation"
             >
-              <option
-                value="CREATED_AT_DESC"
+              <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"
               >
-                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"
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
                 >
                   <span
-                    className="Counter-text"
+                    className="StreamContainer-allCommentsTabText"
                   >
-                    2
+                    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
+            className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          >
+            <label
+              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+              htmlFor="coral-comments-sortMenu"
+            >
+              Sort By
+            </label>
+            <span
+              className="SelectField-root"
+            >
+              <select
+                className="SelectField-select undefined"
+                id="coral-comments-sortMenu"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                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"
+              >
+                <i
+                  aria-hidden="true"
+                  className="Icon-root Icon-sm"
+                >
+                  expand_more
+                </i>
+              </span>
+            </span>
+          </div>
+        </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 708386fdb..855d114a4 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,100 +168,106 @@ 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 Flex-flex"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <ul
+          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
+          role="tablist"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <li
+            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
           >
-            <option
-              value="CREATED_AT_DESC"
+            <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"
             >
-              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"
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
               >
                 <span
-                  className="Counter-text"
+                  className="StreamContainer-allCommentsTabText"
                 >
-                  2
+                  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
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        >
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
+          >
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              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"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+      </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 adb258fa0..40e3eb208 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,100 +89,106 @@ 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 Flex-flex"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <ul
+          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
+          role="tablist"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <li
+            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
           >
-            <option
-              value="CREATED_AT_DESC"
+            <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"
             >
-              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"
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
               >
                 <span
-                  className="Counter-text"
+                  className="StreamContainer-allCommentsTabText"
                 >
-                  0
+                  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
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        >
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
+          >
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              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"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -408,100 +414,106 @@ 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 Flex-flex"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <ul
+          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
+          role="tablist"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <li
+            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
           >
-            <option
-              value="CREATED_AT_DESC"
+            <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"
             >
-              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"
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
               >
                 <span
-                  className="Counter-text"
+                  className="StreamContainer-allCommentsTabText"
                 >
-                  0
+                  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
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        >
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
+          >
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              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"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -701,100 +713,106 @@ 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 Flex-flex"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <ul
+          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
+          role="tablist"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <li
+            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
           >
-            <option
-              value="CREATED_AT_DESC"
+            <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"
             >
-              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"
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
               >
                 <span
-                  className="Counter-text"
+                  className="StreamContainer-allCommentsTabText"
                 >
-                  0
+                  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
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        >
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
+          >
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              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"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+      </div>
       <section
         aria-labelledby="tab-ALL_COMMENTS"
         className="coral coral-allComments"
@@ -901,100 +919,106 @@ 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 Flex-flex"
       >
-        <label
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-          htmlFor="coral-comments-sortMenu"
+        <ul
+          className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
+          role="tablist"
         >
-          Sort By
-        </label>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            className="SelectField-select undefined"
-            id="coral-comments-sortMenu"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            value="CREATED_AT_DESC"
+          <li
+            className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
           >
-            <option
-              value="CREATED_AT_DESC"
+            <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"
             >
-              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"
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
               >
                 <span
-                  className="Counter-text"
+                  className="StreamContainer-allCommentsTabText"
                 >
-                  0
+                  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
+          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        >
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
+          >
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              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"
+            >
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
+          </span>
+        </div>
+      </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 1f6be2991..013a4160f 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"
+      className="Tab-root Tab-root"
       id="tab-COMMENTS"
       role="presentation"
     >
@@ -184,100 +184,106 @@ 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 Flex-flex"
         >
-          <label
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            htmlFor="coral-comments-sortMenu"
+          <ul
+            className="TabBar-root TabBar-secondary StreamContainer-tabBar coral coral-tabBarSecondary coral-tabBarComments"
+            role="tablist"
           >
-            Sort By
-          </label>
-          <span
-            className="SelectField-root"
-          >
-            <select
-              className="SelectField-select undefined"
-              id="coral-comments-sortMenu"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              value="CREATED_AT_DESC"
+            <li
+              className="Tab-root Tab-root StreamContainer-allCommentsTabContainer"
+              id="tab-ALL_COMMENTS"
+              role="presentation"
             >
-              <option
-                value="CREATED_AT_DESC"
+              <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"
               >
-                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"
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
                 >
                   <span
-                    className="Counter-text"
+                    className="StreamContainer-allCommentsTabText"
                   >
-                    2
+                    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
+            className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+          >
+            <label
+              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+              htmlFor="coral-comments-sortMenu"
+            >
+              Sort By
+            </label>
+            <span
+              className="SelectField-root"
+            >
+              <select
+                className="SelectField-select undefined"
+                id="coral-comments-sortMenu"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                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"
+              >
+                <i
+                  aria-hidden="true"
+                  className="Icon-root Icon-sm"
+                >
+                  expand_more
+                </i>
+              </span>
+            </span>
+          </div>
+        </div>
         <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 f2b7078db..0fd1bab10 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"
+      className="Tab-root Tab-root"
       id="tab-COMMENTS"
       role="presentation"
     >
@@ -32,7 +32,7 @@ exports[`renders the empty settings pane 1`] = `
       </button>
     </li>
     <li
-      className="Tab-root"
+      className="Tab-root Tab-root"
       id="tab-PROFILE"
       role="presentation"
     >
@@ -110,7 +110,7 @@ exports[`renders the empty settings pane 1`] = `
         role="tablist"
       >
         <li
-          className="Tab-root"
+          className="Tab-root 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"
+          className="Tab-root Tab-root"
           id="tab-NOTIFICATIONS"
           role="presentation"
         >
@@ -156,7 +156,7 @@ exports[`renders the empty settings pane 1`] = `
           </button>
         </li>
         <li
-          className="Tab-root"
+          className="Tab-root 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 ec63ce04a..98f9459f5 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={styles.root}
+        className={cn(styles.root, classes.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 44c943182..16873ad89 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"
+  className="Tab-root 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 06a3d4ece..bc1d0d2eb 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"
+    className="Tab-root Tab-root"
     id="tab-one"
     role="presentation"
   >
@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
     </button>
   </li>
   <li
-    className="Tab-root"
+    className="Tab-root Tab-root"
     id="tab-two"
     role="presentation"
   >
@@ -48,7 +48,7 @@ exports[`renders correctly 1`] = `
     </button>
   </li>
   <li
-    className="Tab-root"
+    className="Tab-root Tab-root"
     id="tab-three"
     role="presentation"
   >