UX changes

app/assets/stylesheets/framework/banner.scss

@@ -2,7 +2,6 @@
   display: flex;
   position: relative;
   flex-wrap: wrap;
-  justify-content: center;
   align-items: start;
   .banner-close {
@@ -18,18 +17,28 @@
   }
   .banner-graphic {
-    margin:  0 20px 20px;
+    margin:  0 20px 20px 0;
   }
   &.banner-non-empty-state {
     border-bottom: 1px solid $border-color;
   }
-  .banner-body {
-    text-align: left;
-  }
-  .banner-buttons {
-    text-align: center;
+  @media (max-width: $screen-xs-max) {
+    justify-content: center;
+
+    .banner-title,
+    .banner-buttons {
+      text-align: center;
+    }
+    .banner-text,
+    .banner-link {
+      display: inline;
+    }
+
+    .banner-graphic {
+      margin: 0 20px 20px;
+    }
   }
 }

app/assets/stylesheets/framework/buttons.scss

@@ -486,4 +486,4 @@ fieldset[disabled] .btn,
   &:hover {
     @extend %disabled;
   }
-}
+}
\ No newline at end of file

app/views/shared/_auto_devops_callout.html.haml

@@ -3,7 +3,7 @@
     = custom_icon('icon_autodevops')
   .banner-body.prepend-left-10.append-bottom-10
-    %h5= s_('AutoDevOps|Auto DevOps (Beta)')
+    %h5.banner-title= s_('AutoDevOps|Auto DevOps (Beta)')
     %p= s_('AutoDevOps|It will automatically build, test, and deploy your application based on a predefined CI/CD configuration.')
     %p
       - link = link_to(s_('AutoDevOps|Auto DevOps documentation'), help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer')

app/views/shared/milestones/_deprecation_message.html.haml

 .banner-callout.compact.milestone-deprecation-message.js-milestone-deprecation-message.prepend-top-20
   .banner-graphic= image_tag 'illustrations/milestone_removing-page.svg'
   .banner-body.prepend-left-10.append-right-10
-    %h5.prepend-top-0= _('This page will be removed in a future release.')
-    %p= _('Use group milestones to manage issues from multiple projects in the same milestone.')
-    = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left'
+    %h5.banner-title.prepend-top-0= _('This page will be removed in a future release.')
+    %p.banner-text= _('Use group milestones to manage issues from multiple projects in the same milestone.')
+    = button_tag _('Promote these project milestones into a group milestone.'), class: 'btn-link js-popover-link text-align-left banner-link'
     .banner-buttons.prepend-top-20= link_to _('Learn more'), help_page_url('user/project/milestones/index', anchor: 'promoting-project-milestones-to-group-milestones'), class: 'btn btn-default', target: '_blank'
   %template.js-milestone-deprecation-message-template