Use `.hyp-u-stretch`

src/sidebar/components/Annotation/Annotation.js

@@ -106,7 +106,7 @@ function Annotation({
             )}
             {isSaving && <div className="Annotation__actions">Saving...</div>}
             {annotation && showActions && (
-              <div className="hyp-u-layout-row--justify-right u-stretch">
+              <div className="hyp-u-layout-row--justify-right hyp-u-stretch">
                 <AnnotationActionBar
                   annotation={annotation}
                   onReply={onReply}

src/sidebar/components/Annotation/AnnotationHeader.js

@@ -134,7 +134,7 @@ function AnnotationHeader({
         )}
 
         {showTimestamps && (
-          <div className="hyp-u-layout-row--justify-right u-stretch">
+          <div className="hyp-u-layout-row--justify-right hyp-u-stretch">
             <AnnotationTimestamps
               annotationCreated={annotation.created}
               annotationUpdated={annotation.updated}

src/sidebar/components/MarkdownEditor.js

@@ -343,7 +343,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }) {
         tabIndex={getTabIndex(buttonIds.list)}
         title="Bulleted list"
       />
-      <span className="u-stretch" />
+      <span className="hyp-u-stretch" />
       <div className="MarkdownEditor__toolbar-help-link">
         <a
           href="https://web.hypothes.is/help/formatting-annotations-with-markdown/"

src/sidebar/components/ModerationBanner.js

@@ -90,7 +90,7 @@ function ModerationBanner({ annotation, api, toastMessenger }) {
       {annotation.hidden && (
         <span>Hidden from users. Flagged x{flagCount}</span>
       )}
-      <span className="u-stretch" />
+      <span className="hyp-u-stretch" />
       <button {...toggleButtonProps}>
         {annotation.hidden ? 'Unhide' : 'Hide'}
       </button>

src/sidebar/components/TopBar.js

@@ -115,7 +115,7 @@ function TopBar({
       {!isSidebar && (
         <div className="TopBar__inner content">
           <StreamSearchInput />
-          <div className="u-stretch" />
+          <div className="hyp-u-stretch" />
           <IconButton
             icon="help"
             expanded={isHelpPanelOpen}
@@ -130,7 +130,7 @@ function TopBar({
       {isSidebar && (
         <div className="TopBar__inner content">
           <GroupList />
-          <div className="u-stretch" />
+          <div className="hyp-u-stretch" />
           {pendingUpdateCount > 0 && (
             <IconButton
               icon="refresh"

src/styles/util.scss

@@ -8,12 +8,6 @@
 
 // Layout
 
-// Use this class to make an element in a flex container "stretchy" and grow
-// when there is extra space available.
-.u-stretch {
-  flex-grow: 1;
-}
-
 // Put equal, standard spacing between children horizontally
 .u-horizontal-rhythm {
   @include layout.horizontal-rhythm;