fix(badge align): fix alignment of badges on all screens. Simplify logic to achieve this

Author: Eric Jimenez

public/_includes/_hero.jade

@@ -8,8 +8,9 @@ if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
 header(class="hero background-sky")
-  h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
-  if useBadges
+  div(class="inner-header")
+    h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
+    if useBadges
     span(class="badges")
       if docType
         span(class="status-badge").

public/resources/css/module/_hero.scss

@@ -35,10 +35,6 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
   screen and (max-width: $tablet-breakpoint) {
     height: auto;
     padding-top: 40px;
-
-    .badges {
-      margin-top: $unit * 6;
-    }
   }
 
   &.is-large {
@@ -53,8 +49,18 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
     }
   }
 
+  .inner-header {
+    display: flex;
+    justify-items: center;
+    flex-wrap: wrap;
+
+    @media screen and (max-width: 599px) {
+      margin: ($unit * 6) 0px 0px 0px;
+    }
+  }
+
   .badges {
-    padding-left: 8px;
+    margin-top: 4px;
 
     .status-badge {
       color: #0143A3;
@@ -73,10 +79,6 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
   }
 
   @media screen and (max-width: 599px) {
-    .badges {
-      margin-top: $unit;
-      padding-left: 0;
-    }
 
     .hero-title-with-badges {
       margin-bottom: $unit * 2;
@@ -92,6 +94,7 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
     display: inline; // title will be inline with badges
     text-transform: uppercase;
     margin: 0;
+    margin-right: 8px;
     opacity: .87;
 
     &.is-standard-case {
@@ -101,7 +104,8 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),
     screen and (max-width: $tablet-breakpoint) {
-      margin: ($unit * 6) 0px 0px 0px;
+      // reduce size of api doc title on small screens, prevents cut text on long titles
+      font-size: 28px;
     }
   }