Merge branch 'cycle-anyltics-landing-box-fix' into 'master'

Fixed cycle analytics intro box styling regression

Closes #31844

See merge request !11111

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -3,6 +3,25 @@
   margin: 24px auto 0;
   position: relative;
+  .landing {
+    margin-top: 10px;
+
+    .inner-content {
+      white-space: normal;
+
+      h4,
+      p {
+        margin: 7px 0 0;
+        max-width: 480px;
+        padding: 0 $gl-padding;
+
+        @media (max-width: $screen-sm-min) {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+
   .col-headers {
     ul {
       margin: 0;

app/views/projects/cycle_analytics/show.html.haml

@@ -9,17 +9,17 @@
 #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
-    .bordered-box.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
-      = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()")
-      .row
-        .col-sm-3.col-xs-12.svg-container
-          = custom_icon('icon_cycle_analytics_splash')
-        .col-sm-8.col-xs-12.inner-content
-          %h4
-            {{ __('Introducing Cycle Analytics') }}
-          %p
-            {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
-
+    .landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
+      %button.dismiss-button{ type: 'button', 'aria-label': 'Dismiss Cycle Analytics introduction box' }
+        = icon("times", "@click" => "dismissOverviewDialog()")
+      .svg-container
+        = custom_icon('icon_cycle_analytics_splash')
+      .inner-content
+        %h4
+          {{ __('Introducing Cycle Analytics') }}
+        %p
+          {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
+        %p
           = link_to _('Read more'), help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
   = icon("spinner spin", "v-show" => "isLoading")
   .wrapper{ "v-show" => "!isLoading && !hasError" }