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;
     }

aio/tools/transforms/templates/api/base.template.html

@@ -20,13 +20,13 @@
     {% for crumb in doc.breadCrumbs %}{% if not loop.last %} {$ slash() $} {% if crumb.path %}<a href="{$ crumb.path $}">{$ crumb.text $}</a>{% else %}{$ crumb.text $}{% endif %}{% endif %}{% endfor %}
   </div>
   <header class="api-header">
+    <h1>{$ doc.name $}</h1>
+    <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
     {% if doc.deprecated !== undefined %}<label class="api-status-label deprecated">deprecated</label>{% endif %}
     {% if doc.experimental !== undefined %}<label class="api-status-label experimental">experimental</label>{% endif %}
     {% if doc.stable !== undefined %}<label class="api-status-label stable">stable</label>{% endif %}
-    <label class="api-type-label {$ doc.docType $}">{$ doc.docType $}</label>
-    <h1>{$ doc.name $}</h1>
-    <span class="version">{$ version $}</span>
   </header>
+  <aio-toc class="embedded"></aio-toc>
 
   <div class="api-body">
     {% block body %}{% endblock %}