Extract and document `.u-wrap-reverse` class

src/sidebar/components/Annotation/AnnotationHeader.js

@@ -115,10 +115,7 @@ function AnnotationHeader({
 
   return (
     <header>
-      <div
-        className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2"
-        style="flex-wrap:wrap-reverse"
-      >
+      <div className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 u-wrap-reverse">
         {annotationIsPrivate && !isEditing && (
           <Icon
             classes="u-icon--xsmall"
@@ -149,10 +146,7 @@ function AnnotationHeader({
       </div>
 
       {showExtendedInfo && (
-        <div
-          className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2"
-          style="flex-wrap:wrap-reverse"
-        >
+        <div className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 u-wrap-reverse">
           <AnnotationShareInfo annotation={annotation} />
           {!isEditing && isHighlight(annotation) && (
             <Icon

src/styles/util.scss

@@ -79,6 +79,12 @@
   text-align: center;
 }
 
+// A style to make a flex row wrap from bottom to top instead of (default)
+// top to bottom
+.u-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 // TODO: This is a temporary utility class to allow elements in the sidebar
 // (e.g. panels, thread cards, etc.)
 // to apply margins such that they are evenly spaced. In the future, the