fix(aio): reposition and shrink the API badges (#22570)

Closes #22130

PR Close #22570

aio/src/styles/2-modules/_api-pages.scss

@@ -10,6 +10,16 @@
   }
 }
 
+.api-header {
+  display: flex;
+  align-items: center;
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 .api-body {
 
   .class-overview {

aio/src/styles/2-modules/_heading-anchors.scss

@@ -3,7 +3,7 @@
 
     .header-link {
       color: $mediumgray;
-      margin-left: 8px;
+      margin: 0 4px;
       text-decoration: none;
       user-select: none;
       visibility: hidden;

aio/src/styles/2-modules/_label.scss

@@ -38,6 +38,14 @@ label.raised, .api-header label {
 
 .api-header label {
 
+    // The API badges should be a little smaller
+    padding: 2px 10px;
+    font-size: 12px;
+
+    @media screen and (max-width: 600px) {
+        margin: 4px 0;
+    }
+
     &.api-status-label {
         background-color: $mediumgray;
     }