Refactor icon-help-inverse positioning

wagtail/admin/static_src/wagtailadmin/scss/components/_icons.scss

@@ -139,19 +139,18 @@
 // CSS-only circled question mark.
 // <span class="icon-help-inverse" aria-hidden="true"></span>
 .icon-help-inverse {
+    $size: 15px;
+
     &:before {
-        border-radius: 100%;
-        display: block;
-        float: left;
         content: '?';
-        border: 1px solid $color-grey-2;
-        color: $color-grey-2;
-        height: 15px;
-        width: 15px;
-        line-height: 15px;
-        text-align: center;
+        display: inline-block;
+        width: $size;
+        height: $size;
+        line-height: $size;
         font-size: 1.1em;
-        margin-left: -2em;
-        margin-top: 0.3em;
+        text-align: center;
+        border-radius: 100%;
+        color: $color-grey-2;
+        border: 1px solid currentColor;
     }
 }

wagtail/admin/static_src/wagtailadmin/scss/components/_streamfield.scss

@@ -90,6 +90,10 @@ li.sequence-member {
     .sequence-member:hover & {
         opacity: 1;
     }
+
+    .icon-help-inverse {
+        margin-right: 0.5em;
+    }
 }
 
 // Image chooser as direct descendant of top-level streamfield has special display

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -76,6 +76,12 @@ $object-title-height: 40px;
         padding-right: $grid-gutter-width / 2;
         padding-left: 3em;
         opacity: 1;
+
+        .icon-help-inverse {
+            float: left;
+            margin-left: -2em;
+            margin-top: 0.3em;
+        }
     }
 
     &:hover .object-help {