Make flash notifications sticky

This commit also unifies layout structure
and remove no_container flag

app/assets/javascripts/flash.js

 import _ from 'underscore';
+import { spriteIcon } from './lib/utils/common_utils';
 
 const hideFlash = (flashEl, fadeTransition = true) => {
   if (fadeTransition) {
@@ -35,16 +36,11 @@ const createAction = config => `
   </a>
 `;
 
-const createFlashEl = (message, type, isFixedLayout = false) => `
-  <div
-    class="flash-${type}"
-  >
-    <div
-      class="flash-text ${
-        isFixedLayout ? 'container-fluid container-limited limit-container-width' : ''
-      }"
-    >
+const createFlashEl = (message, type) => `
+  <div class="flash-content flash-${type} rounded">
+    <div class="flash-text">
       ${_.escape(message)}
+      ${spriteIcon('close', 'close-icon')}
     </div>
   </div>
 `;
@@ -76,15 +72,10 @@ const createFlash = function createFlash(
   addBodyClass = false,
 ) {
   const flashContainer = parent.querySelector('.flash-container');
-  const navigation = parent.querySelector('.content');
 
   if (!flashContainer) return null;
 
-  const isFixedLayout = navigation
-    ? navigation.parentNode.classList.contains('container-limited')
-    : true;
-
-  flashContainer.innerHTML = createFlashEl(message, type, isFixedLayout);
+  flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   removeFlashClickListener(flashEl, fadeTransition);

app/assets/javascripts/pages/profiles/two_factor_auths/index.js

@@ -5,9 +5,10 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = parseBoolean(twoFactorNode.dataset.twoFactorSkippable);
+
   if (skippable) {
     const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
-    const flashAlert = document.querySelector('.flash-alert .container-fluid');
+    const flashAlert = document.querySelector('.flash-alert');
     if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
   }
 

app/assets/stylesheets/framework/flash.scss

+$notification-box-shadow-color: rgba(0, 0, 0, 0.25);
+
 .flash-container {
   cursor: pointer;
   margin: 0;
@@ -6,12 +8,32 @@
   position: relative;
   z-index: 1;
 
+  &.sticky {
+    position: sticky;
+    position: -webkit-sticky;
+    top: $flash-container-top;
+    z-index: 200;
+
+    .flash-content {
+      box-shadow: 0 2px 4px 0 $notification-box-shadow-color;
+    }
+  }
+
+  .close-icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: $gl-padding;
+    top: $gl-padding;
+  }
+
   .flash-notice,
   .flash-alert,
   .flash-success,
   .flash-warning {
     border-radius: $border-radius-default;
     color: $white-light;
+    padding-right: $gl-padding * 2;
 
     .container-fluid,
     .container-fluid.container-limited {
@@ -97,3 +119,28 @@
     }
   }
 }
+
+.gl-browser-ie .flash-container {
+  position: fixed;
+  max-width: $limited-layout-width;
+  left: 50%;
+
+  .flash-alert {
+    position: relative;
+    left: -50%;
+  }
+}
+
+.with-system-header .flash-container {
+  top: $flash-container-top + $system-header-height;
+}
+
+.with-performance-bar {
+  .flash-container {
+    top: $flash-container-top + $performance-bar-height;
+  }
+
+  &.with-system-header .flash-container {
+    top: $flash-container-top + $performance-bar-height + $system-header-height;
+  }
+}

app/assets/stylesheets/framework/layout.scss

@@ -29,6 +29,15 @@ body {
   }
 }
 
+.container-fluid {
+  &.limit-container-width {
+    .flash-container.sticky {
+      max-width: $limited-layout-width;
+      margin: 0 auto;
+    }
+  }
+}
+
 .content-wrapper {
   margin-top: $header-height;
   padding-bottom: 100px;

app/assets/stylesheets/framework/variables.scss

@@ -377,6 +377,7 @@ $performance-bar-height: 35px;
 $system-header-height: 16px;
 $system-footer-height: $system-header-height;
 $flash-height: 52px;
+$flash-container-top: 48px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 $home-panel-title-row-height: 64px;

app/views/admin/background_jobs/show.html.haml

-- @no_container = true
 - page_title "Background Jobs"
 
-%div{ class: container_class }
-  %h3.page-title Background Jobs
-  %p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
+%h3.page-title Background Jobs
+%p.light GitLab uses #{link_to "sidekiq", "http://sidekiq.org/"} library for async job processing
 
-  %hr
-  .card
-    %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }
+%hr
+.card
+  %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }

app/views/admin/groups/index.html.haml

-- @no_container = true
 - page_title _("Groups")
 
-%div{ class: container_class }
-  .top-area
-    .prepend-top-default.append-bottom-default
-      = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
-        = hidden_field_tag :sort, @sort
-        .search-holder
-          - project_name = params[:name].present? ? params[:name] : nil
-          .search-field-holder
-            = search_field_tag :name, project_name, class: "form-control search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: 'Search by name'
-            = icon("search", class: "search-icon")
-          = render "shared/groups/dropdown", options_hash: admin_groups_sort_options_hash
-          = link_to new_admin_group_path, class: "btn btn-success" do
-            = _('New group')
-  %ul.content-list
-    = render @groups
+.top-area
+  .prepend-top-default.append-bottom-default
+    = form_tag admin_groups_path, method: :get, class: 'js-search-form' do |f|
+      = hidden_field_tag :sort, @sort
+      .search-holder
+        - project_name = params[:name].present? ? params[:name] : nil
+        .search-field-holder
+          = search_field_tag :name, project_name, class: "form-control search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: 'Search by name'
+          = icon("search", class: "search-icon")
+        = render "shared/groups/dropdown", options_hash: admin_groups_sort_options_hash
+        = link_to new_admin_group_path, class: "btn btn-success" do
+          = _('New group')
+%ul.content-list
+  = render @groups
 
-  = paginate @groups, theme: "gitlab"
+= paginate @groups, theme: "gitlab"

app/views/admin/health_check/show.html.haml

-- @no_container = true
 - page_title _('Health Check')
 - no_errors = @errors.blank?
 
-%div{ class: container_class }
-  %h3.page-title= page_title
-  .bs-callout.clearfix
-    .float-left
-      %p
-    #{ s_('HealthCheck|Access token is') }
-    %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
-    .prepend-top-10
-      = button_to _("Reset health check access token"), reset_health_check_token_admin_application_settings_path,
-        method: :put, class: 'btn btn-default',
-        data: { confirm: _('Are you sure you want to reset the health check token?') }
-  %p.light
-    #{ _('Health information can be retrieved from the following endpoints. More information is available') }
-    = link_to s_('More information is available|here'), help_page_path('user/admin_area/monitoring/health_check')
-    %ul
-      %li
-        %code= readiness_url(token: Gitlab::CurrentSettings.health_check_access_token)
-      %li
-        %code= liveness_url(token: Gitlab::CurrentSettings.health_check_access_token)
-      %li
-        %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
-      = render_if_exists 'admin/health_check/health_check_url'
-  %hr
-  .card
-    .card-header
-      Current Status:
-      - if no_errors
-        = icon('circle', class: 'cgreen')
-        #{ s_('HealthCheck|Healthy') }
-      - else
-        = icon('warning', class: 'cred')
-        #{ s_('HealthCheck|Unhealthy') }
-    .card-body
-      - if no_errors
-        #{ s_('HealthCheck|No Health Problems Detected') }
-      - else
-        = @errors
+%h3.page-title= page_title
+.bs-callout.clearfix
+  .float-left
+    %p
+  #{ s_('HealthCheck|Access token is') }
+  %code#health-check-token= Gitlab::CurrentSettings.health_check_access_token
+  .prepend-top-10
+    = button_to _("Reset health check access token"), reset_health_check_token_admin_application_settings_path,
+      method: :put, class: 'btn btn-default',
+      data: { confirm: _('Are you sure you want to reset the health check token?') }
+%p.light
+  #{ _('Health information can be retrieved from the following endpoints. More information is available') }
+  = link_to s_('More information is available|here'), help_page_path('user/admin_area/monitoring/health_check')
+  %ul
+    %li
+      %code= readiness_url(token: Gitlab::CurrentSettings.health_check_access_token)
+    %li
+      %code= liveness_url(token: Gitlab::CurrentSettings.health_check_access_token)
+    %li
+      %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
+    = render_if_exists 'admin/health_check/health_check_url'
+%hr
+.card
+  .card-header
+    Current Status:
+    - if no_errors
+      = icon('circle', class: 'cgreen')
+      #{ s_('HealthCheck|Healthy') }
+    - else
+      = icon('warning', class: 'cred')
+      #{ s_('HealthCheck|Unhealthy') }
+  .card-body
+    - if no_errors
+      #{ s_('HealthCheck|No Health Problems Detected') }
+    - else
+      = @errors

app/views/admin/jobs/index.html.haml

 - breadcrumb_title "Jobs"
-- @no_container = true
 
-%div{ class: container_class }
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
+  = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
-    = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
+  - if @all_builds.running_or_pending.any?
+    #stop-jobs-modal
+    .nav-controls
+      %button#stop-jobs-button.btn.btn-danger{ data: { toggle: 'modal',
+        target: '#stop-jobs-modal',
+        url: cancel_all_admin_jobs_path } }
+        = s_('AdminArea|Stop all jobs')
 
-    - if @all_builds.running_or_pending.any?
-      #stop-jobs-modal
-      .nav-controls
-        %button#stop-jobs-button.btn.btn-danger{ data: { toggle: 'modal',
-          target: '#stop-jobs-modal',
-          url: cancel_all_admin_jobs_path } }
-          = s_('AdminArea|Stop all jobs')
+.row-content-block.second-block
+  #{(@scope || 'all').capitalize} jobs
 
-  .row-content-block.second-block
-    #{(@scope || 'all').capitalize} jobs
-
-  %ul.content-list.builds-content-list.admin-builds-table
-    = render "projects/jobs/table", builds: @builds, admin: true
+%ul.content-list.builds-content-list.admin-builds-table
+  = render "projects/jobs/table", builds: @builds, admin: true

app/views/admin/logs/show.html.haml

-- @no_container = true
 - page_title "Logs"
 
-%div{ class: container_class }
-  %ul.nav-links.log-tabs.nav.nav-tabs
-    - @loggers.each do |klass|
-      %li.nav-item
-        = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' }, class: "#{active_when(klass == @loggers.first)} nav-link"
-  .row-content-block
-    To prevent performance issues admin logs output the last 2000 lines
-  .tab-content
-    - @loggers.each do |klass|
-      .tab-pane{ class: active_when(klass == @loggers.first), id: klass.file_name_noext }
-        .file-holder#README
-          .js-file-title.file-title
-            %i.fa.fa-file
-            = klass.file_name
-            .float-right
-              = link_to '#', class: 'log-bottom' do
-                %i.fa.fa-arrow-down
-                Scroll down
-          .file-content.logs
-            %ol
-              - klass.read_latest.each do |line|
-                %li
-                  %p= line
+%ul.nav-links.log-tabs.nav.nav-tabs
+  - @loggers.each do |klass|
+    %li.nav-item
+      = link_to klass.file_name, "##{klass.file_name_noext}", data: { toggle: 'tab' }, class: "#{active_when(klass == @loggers.first)} nav-link"
+.row-content-block
+  To prevent performance issues admin logs output the last 2000 lines
+.tab-content
+  - @loggers.each do |klass|
+    .tab-pane{ class: active_when(klass == @loggers.first), id: klass.file_name_noext }
+      .file-holder#README
+        .js-file-title.file-title
+          %i.fa.fa-file
+          = klass.file_name
+          .float-right
+            = link_to '#', class: 'log-bottom' do
+              %i.fa.fa-arrow-down
+              Scroll down
+        .file-content.logs
+          %ol
+            - klass.read_latest.each do |line|
+              %li
+                %p= line

app/views/admin/projects/index.html.haml

-- @no_container = true
 - page_title "Projects"
 - params[:visibility_level] ||= []
 
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .prepend-top-default
+    .search-holder
+      = render 'shared/projects/search_form', autofocus: true, icon: true, admin_view: true
+      .dropdown
+        - toggle_text = 'Namespace'
+        - if params[:namespace_id].present?
+          = hidden_field_tag :namespace_id, params[:namespace_id]
+          - namespace = Namespace.find(params[:namespace_id])
+          - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
+        = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
+        .dropdown-menu.dropdown-select.dropdown-menu-right
+          = dropdown_title('Namespaces')
+          = dropdown_filter("Search for Namespace")
+          = dropdown_content
+          = dropdown_loading
+      = render 'shared/projects/dropdown'
+      = link_to new_project_path, class: 'btn btn-success' do
+        New Project
+      = button_tag "Search", class: "btn btn-primary btn-search hide"
 
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    .prepend-top-default
-      .search-holder
-        = render 'shared/projects/search_form', autofocus: true, icon: true, admin_view: true
-        .dropdown
-          - toggle_text = 'Namespace'
-          - if params[:namespace_id].present?
-            = hidden_field_tag :namespace_id, params[:namespace_id]
-            - namespace = Namespace.find(params[:namespace_id])
-            - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
-          = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
-          .dropdown-menu.dropdown-select.dropdown-menu-right
-            = dropdown_title('Namespaces')
-            = dropdown_filter("Search for Namespace")
-            = dropdown_content
-            = dropdown_loading
-        = render 'shared/projects/dropdown'
-        = link_to new_project_path, class: 'btn btn-success' do
-          New Project
-        = button_tag "Search", class: "btn btn-primary btn-search hide"
+  %ul.nav-links.nav.nav-tabs
+    - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
+    = nav_link(opts) do
+      = link_to admin_projects_path do
+        All
 
-    %ul.nav-links.nav.nav-tabs
-      - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
-      = nav_link(opts) do
-        = link_to admin_projects_path do
-          All
+    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s) }) do
+      = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
+        Private
+    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s) }) do
+      = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
+        Internal
+    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s) }) do
+      = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
+        Public
 
-      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s) }) do
-        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
-          Private
-      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s) }) do
-        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
-          Internal
-      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s) }) do
-        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
-          Public
-
-  = render 'projects'
+= render 'projects'

app/views/admin/requests_profiles/index.html.haml

-- @no_container = true
 - page_title 'Requests Profiles'
 
-%div{ class: container_class }
-  %h3.page-title
-    = page_title
+%h3.page-title
+  = page_title
 
-  .bs-callout.clearfix
-    Pass the header
-    %code X-Profile-Token: #{@profile_token}
-    to profile the request
+.bs-callout.clearfix
+  Pass the header
+  %code X-Profile-Token: #{@profile_token}
+  to profile the request
 
-  - if @profiles.present?
-    .prepend-top-default
-      - @profiles.each do |path, profiles|
-        .card.card-small
-          .card-header
-            %code= path
-          %ul.content-list
-            - profiles.each do |profile|
-              %li
-                = link_to profile.time.to_s(:long) + ' ' + profile.profile_mode.capitalize,
-                  admin_requests_profile_path(profile)
-  - else
-    %p
-      No profiles found
+- if @profiles.present?
+  .prepend-top-default
+    - @profiles.each do |path, profiles|
+      .card.card-small
+        .card-header
+          %code= path
+        %ul.content-list
+          - profiles.each do |profile|
+            %li
+              = link_to profile.time.to_s(:long) + ' ' + profile.profile_mode.capitalize,
+                admin_requests_profile_path(profile)
+- else
+  %p
+    No profiles found

app/views/admin/system_info/show.html.haml

-- @no_container = true
 - page_title "System Info"
 
-%div{ class: container_class }
-  .prepend-top-default
-  .row
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 CPU
-        .data
-          - if @cpus
-            %h1 #{@cpus.length} cores
-          - else
-            = icon('warning', class: 'text-warning')
-            Unable to collect CPU info
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 Memory Usage
-        .data
-          - if @memory
-            %h1 #{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)}
-          - else
-            = icon('warning', class: 'text-warning')
-            Unable to collect memory info
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 Disk Usage
-        .data
-          - @disks.each do |disk|
-            %h1 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])}
-            %p= disk[:disk_name]
-            %p= disk[:mount_path]
-    .col-sm-4
-      .card.bg-light.light-well
-        %h4 Uptime
-        .data
-          %h1= distance_of_time_in_words_to_now(Rails.application.config.booted_at)
+.prepend-top-default
+.row
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 CPU
+      .data
+        - if @cpus
+          %h1 #{@cpus.length} cores
+        - else
+          = icon('warning', class: 'text-warning')
+          Unable to collect CPU info
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 Memory Usage
+      .data
+        - if @memory
+          %h1 #{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)}
+        - else
+          = icon('warning', class: 'text-warning')
+          Unable to collect memory info
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 Disk Usage
+      .data
+        - @disks.each do |disk|
+          %h1 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])}
+          %p= disk[:disk_name]
+          %p= disk[:mount_path]
+  .col-sm-4
+    .card.bg-light.light-well
+      %h4 Uptime
+      .data
+        %h1= distance_of_time_in_words_to_now(Rails.application.config.booted_at)

app/views/admin/users/index.html.haml

-- @no_container = true
 - page_title "Users"
 
-%div{ class: container_class }
-  .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-    .fade-left
-      = icon('angle-left')
-    .fade-right
-      = icon('angle-right')
-    %ul.nav-links.nav.nav-tabs.scrolling-tabs
-      = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
-        = link_to admin_users_path do
-          = s_('AdminUsers|Active')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.active)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
-        = link_to admin_users_path(filter: "admins") do
-          = s_('AdminUsers|Admins')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.admins)
-      = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
-        = link_to admin_users_path(filter: 'two_factor_enabled') do
-          = s_('AdminUsers|2FA Enabled')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.with_two_factor)
-      = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
-        = link_to admin_users_path(filter: 'two_factor_disabled') do
-          = s_('AdminUsers|2FA Disabled')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.without_two_factor)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
-        = link_to admin_users_path(filter: 'external') do
-          = s_('AdminUsers|External')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.external)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
-        = link_to admin_users_path(filter: "blocked") do
-          = s_('AdminUsers|Blocked')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.blocked)
-      = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
-        = link_to admin_users_path(filter: "wop") do
-          = s_('AdminUsers|Without projects')
-          %small.badge.badge-pill= limited_counter_with_delimiter(User.without_projects)
-    .nav-controls
-      = render_if_exists 'admin/users/admin_email_users'
-      = link_to s_('AdminUsers|New user'), new_admin_user_path, class: 'btn btn-success btn-search float-right'
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left
+    = icon('angle-left')
+  .fade-right
+    = icon('angle-right')
+  %ul.nav-links.nav.nav-tabs.scrolling-tabs
+    = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
+      = link_to admin_users_path do
+        = s_('AdminUsers|Active')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.active)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
+      = link_to admin_users_path(filter: "admins") do
+        = s_('AdminUsers|Admins')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.admins)
+    = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
+      = link_to admin_users_path(filter: 'two_factor_enabled') do
+        = s_('AdminUsers|2FA Enabled')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.with_two_factor)
+    = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
+      = link_to admin_users_path(filter: 'two_factor_disabled') do
+        = s_('AdminUsers|2FA Disabled')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.without_two_factor)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
+      = link_to admin_users_path(filter: 'external') do
+        = s_('AdminUsers|External')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.external)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
+      = link_to admin_users_path(filter: "blocked") do
+        = s_('AdminUsers|Blocked')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.blocked)
+    = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
+      = link_to admin_users_path(filter: "wop") do
+        = s_('AdminUsers|Without projects')
+        %small.badge.badge-pill= limited_counter_with_delimiter(User.without_projects)
+  .nav-controls
+    = render_if_exists 'admin/users/admin_email_users'
+    = link_to s_('AdminUsers|New user'), new_admin_user_path, class: 'btn btn-success btn-search float-right'
 
-  .filtered-search-block.row-content-block.border-top-0
-    = form_tag admin_users_path, method: :get do
-      - if params[:filter].present?
-        = hidden_field_tag "filter", h(params[:filter])
-      .search-holder
-        .search-field-holder
-          = search_field_tag :search_query, params[:search_query], placeholder: s_('AdminUsers|Search by name, email or username'), class: 'form-control search-text-input js-search-input', spellcheck: false
-          - if @sort.present?
-            = hidden_field_tag :sort, @sort
-          = icon("search", class: "search-icon")
-          = button_tag s_('AdminUsers|Search users') if Rails.env.test?
-        .dropdown.user-sort-dropdown
-          - toggle_text = @sort.present? ? users_sort_options_hash[@sort] : sort_title_name
-          = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
-          %ul.dropdown-menu.dropdown-menu-right
-            %li.dropdown-header
-              = s_('AdminUsers|Sort by')
-            %li
-              - users_sort_options_hash.each do |value, title|
-                = link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
-                  = title
+.filtered-search-block.row-content-block.border-top-0
+  = form_tag admin_users_path, method: :get do
+    - if params[:filter].present?
+      = hidden_field_tag "filter", h(params[:filter])
+    .search-holder
+      .search-field-holder
+        = search_field_tag :search_query, params[:search_query], placeholder: s_('AdminUsers|Search by name, email or username'), class: 'form-control search-text-input js-search-input', spellcheck: false
+        - if @sort.present?
+          = hidden_field_tag :sort, @sort
+        = icon("search", class: "search-icon")
+        = button_tag s_('AdminUsers|Search users') if Rails.env.test?
+      .dropdown.user-sort-dropdown
+        - toggle_text = @sort.present? ? users_sort_options_hash[@sort] : sort_title_name
+        = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
+        %ul.dropdown-menu.dropdown-menu-right
+          %li.dropdown-header
+            = s_('AdminUsers|Sort by')
+          %li
+            - users_sort_options_hash.each do |value, title|
+              = link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
+                = title
 
-  - if @users.empty?
-    .nothing-here-block.border-top-0
-      = s_('AdminUsers|No users found')
-  - else
-    .table-holder
-      .thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
-        .table-section.section-40{ role: 'rowheader' }= _('Name')
-        .table-section.section-25{ role: 'rowheader' }= _('Created on')
-        .table-section.section-15{ role: 'rowheader' }= _('Last activity')
+- if @users.empty?
+  .nothing-here-block.border-top-0
+    = s_('AdminUsers|No users found')
+- else
+  .table-holder
+    .thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
+      .table-section.section-40{ role: 'rowheader' }= _('Name')
+      .table-section.section-25{ role: 'rowheader' }= _('Created on')
+      .table-section.section-15{ role: 'rowheader' }= _('Last activity')
 
-      = render partial: 'admin/users/user', collection: @users
+    = render partial: 'admin/users/user', collection: @users
 
-  = paginate @users, theme: "gitlab"
+= paginate @users, theme: "gitlab"
 
 #delete-user-modal

app/views/dashboard/activity.html.haml

 - @hide_top_links = true
-- @no_container = true
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
 
-
 = render_dashboard_gold_trial(current_user)
 
 - page_title    "Activity"
 - header_title  "Activity", activity_dashboard_path
 
-%div{ class: container_class }
-  = render "projects/last_push"
-  = render 'dashboard/activity_head'
+= render "projects/last_push"
+= render 'dashboard/activity_head'
 
-  %section.activities
-    = render 'activities'
+%section.activities
+  = render 'activities'

app/views/dashboard/projects/index.html.haml

-- @no_container = true
 - @hide_top_links = true
 
 = content_for :meta_tags do
@@ -9,11 +8,10 @@
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 
-%div{ class: container_class }
-  = render "projects/last_push"
-  - if show_projects?(@projects, params)
-    = render 'dashboard/projects_head'
-    = render 'nav' unless Feature.enabled?(:project_list_filter_bar)
-    = render 'projects'
-  - else
-    = render "zero_authorized_projects"
+= render "projects/last_push"
+- if show_projects?(@projects, params)
+  = render 'dashboard/projects_head'
+  = render 'nav' unless Feature.enabled?(:project_list_filter_bar)
+  = render 'projects'
+- else
+  = render "zero_authorized_projects"

app/views/dashboard/projects/starred.html.haml

 - @hide_top_links = true
-- @no_container = true
 - breadcrumb_title _("Projects")
 - page_title _("Starred Projects")
 - header_title _("Projects"), dashboard_projects_path
 
 = render_dashboard_gold_trial(current_user)
 
-%div{ class: container_class }
-  = render "projects/last_push"
-  = render 'dashboard/projects_head', project_tab_filter: :starred
+= render "projects/last_push"
+= render 'dashboard/projects_head', project_tab_filter: :starred
 
-  - if params[:filter_projects] || any_projects?(@projects)
-    = render 'projects'
-  - else
-    = render 'starred_empty_state'
+- if params[:filter_projects] || any_projects?(@projects)
+  = render 'projects'
+- else
+  = render 'starred_empty_state'

app/views/groups/labels/index.html.haml

-- @no_container = true
 - page_title 'Labels'
 - can_admin_label = can?(current_user, :admin_label, @group)
 - search = params[:search]
@@ -7,24 +6,23 @@
 
 - if labels_or_filters
   #promote-label-modal
-  %div{ class: container_class }
-    = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
+  = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-    .labels-container.prepend-top-5
-      - if @labels.any?
-        .text-muted
-          = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
-        .other-labels
-          %h5= _('Labels')
-          %ul.content-list.manage-labels-list.js-other-labels
-            = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
-            = paginate @labels, theme: 'gitlab'
-      - elsif search.present?
-        .nothing-here-block
-          = _('No labels with such name or description')
-      - elsif subscribed.present?
-        .nothing-here-block
-          = _('You do not have any subscriptions yet')
+  .labels-container.prepend-top-5
+    - if @labels.any?
+      .text-muted
+        = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
+      .other-labels
+        %h5= _('Labels')
+        %ul.content-list.manage-labels-list.js-other-labels
+          = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
+          = paginate @labels, theme: 'gitlab'
+    - elsif search.present?
+      .nothing-here-block
+        = _('No labels with such name or description')
+    - elsif subscribed.present?
+      .nothing-here-block
+        = _('You do not have any subscriptions yet')
 - else
   = render 'shared/empty_states/labels'
 

app/views/groups/milestones/new.html.haml

-- @no_container = true
 - add_to_breadcrumbs _("Milestones"), group_milestones_path(@group)
 - breadcrumb_title _("New")
 - page_title _("Milestones"), @milestone.name, _("Milestones")
 
-%div{ class: container_class }
-  %h3.page-title
-    New Milestone
+%h3.page-title
+  New Milestone
 
-  %hr
+%hr
 
-  = render "form"
+= render "form"

app/views/groups/show.html.haml

-- @no_container = true
 - breadcrumb_title _("Details")
 - @content_class = "limit-container-width" unless fluid_layout
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
-%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+%div{ class: [("limit-container-width" unless fluid_layout)] }
   = render 'groups/home_panel'
 
   .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }

app/views/instance_statistics/cohorts/index.html.haml

 - breadcrumb_title _("Cohorts")
-- @no_container = true
 
-%div{ class: container_class }
-  - if @cohorts
-    = render 'cohorts_table'
-  - else
-    .bs-callout.bs-callout-warning.clearfix
-      %p
-        - usage_ping_path = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'usage-ping')
-        - usage_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: usage_ping_path }
-        = s_('User Cohorts are only shown when the %{usage_ping_link_start}usage ping%{usage_ping_link_end} is enabled.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
-        - if current_user.admin?
-          - application_settings_path = admin_application_settings_path(anchor: 'usage-statistics')
-          - application_settings_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: application_settings_path }
-          = s_('To enable it and see User Cohorts, visit %{application_settings_link_start}application settings%{application_settings_link_end}.').html_safe % { application_settings_link_start: application_settings_link_start, application_settings_link_end: '</a>'.html_safe }
+- if @cohorts
+  = render 'cohorts_table'
+- else
+  .bs-callout.bs-callout-warning.clearfix
+    %p
+      - usage_ping_path = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'usage-ping')
+      - usage_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: usage_ping_path }
+      = s_('User Cohorts are only shown when the %{usage_ping_link_start}usage ping%{usage_ping_link_end} is enabled.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
+      - if current_user.admin?
+        - application_settings_path = admin_application_settings_path(anchor: 'usage-statistics')
+        - application_settings_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: application_settings_path }
+        = s_('To enable it and see User Cohorts, visit %{application_settings_link_start}application settings%{application_settings_link_end}.').html_safe % { application_settings_link_start: application_settings_link_start, application_settings_link_end: '</a>'.html_safe }

app/views/instance_statistics/conversational_development_index/index.html.haml

-- @no_container = true
 - page_title _('ConvDev Index')
 - usage_ping_enabled = Gitlab::CurrentSettings.usage_ping_enabled
 

app/views/layouts/_flash.html.haml

-- extra_flash_class = local_assigns.fetch(:extra_flash_class, nil)
-
-.flash-container.flash-container-page
+.flash-container.flash-container-page.sticky
   -# We currently only support `alert`, `notice`, `success`
   - flash.each do |key, value|
     -# Don't show a flash message if the message is nil
     - if value
-      %div{ class: "flash-#{key}" }
-        %div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" }
-          %span= value
+      %div{ class: "flash-content flash-#{key} rounded" }
+        %span= value
+        = sprite_icon('close', size: 16, css_class: 'close-icon')

app/views/layouts/_page.html.haml

@@ -13,8 +13,8 @@
       = render "shared/ping_consent"
       - unless @hide_breadcrumbs
         = render "layouts/nav/breadcrumbs"
-      = render "layouts/flash", extra_flash_class: 'limit-container-width'
       .d-flex
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }
+        = render "layouts/flash", extra_flash_class: 'limit-container-width'
         = yield

app/views/projects/activity.html.haml

-- @no_container = true
-
 - page_title _("Activity")
 
-%div{ class: container_class }
-  = render 'projects/last_push'
-
+= render 'projects/last_push'
 = render 'projects/activity'

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

-- @no_container = true
 - project_duration = age_map_duration(@blame_groups, @project)
 - page_title "Blame", @blob.path, @ref
 
-%div{ class: container_class }
-  #blob-content-holder.tree-holder
-    = render "projects/blob/breadcrumb", blob: @blob, blame: true
+#blob-content-holder.tree-holder
+  = render "projects/blob/breadcrumb", blob: @blob, blame: true
 
-    .file-holder
-      = render "projects/blob/header", blob: @blob, blame: true
-      .file-blame-legend
-        = render 'age_map_legend'
-      .table-responsive.file-content.blame.code.js-syntax-highlight
-        %table
-          - current_line = 1
-          - @blame_groups.each do |blame_group|
-            %tr
-              - commit = blame_group[:commit]
-              %td.blame-commit{ class: age_map_class(commit.committed_date, project_duration) }
-                .commit
-                  = author_avatar(commit, size: 36, has_tooltip: false)
-                  .commit-row-title
-                    %span.item-title.str-truncated-100
-                      = link_to_markdown commit.title, project_commit_path(@project, commit.id), class: "cdark", title: commit.title
-                    .float-right
-                      = link_to commit.short_id, project_commit_path(@project, commit), class: "commit-sha"
-                     
-                  .light
-                    = commit_author_link(commit, avatar: false)
-                    committed
-                    #{time_ago_with_tooltip(commit.committed_date)}
-              %td.line-numbers
-                - line_count = blame_group[:lines].count
-                - (current_line...(current_line + line_count)).each do |i|
-                  %a.diff-line-num{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
-                    = icon("link")
-                    = i
-                  \
-                - current_line += line_count
-              %td.lines
-                %pre.code.highlight
-                  %code
-                    - blame_group[:lines].each do |line|
-                      #{line}
+  .file-holder
+    = render "projects/blob/header", blob: @blob, blame: true
+    .file-blame-legend
+      = render 'age_map_legend'
+    .table-responsive.file-content.blame.code.js-syntax-highlight
+      %table
+        - current_line = 1
+        - @blame_groups.each do |blame_group|
+          %tr
+            - commit = blame_group[:commit]
+            %td.blame-commit{ class: age_map_class(commit.committed_date, project_duration) }
+              .commit
+                = author_avatar(commit, size: 36, has_tooltip: false)
+                .commit-row-title
+                  %span.item-title.str-truncated-100
+                    = link_to_markdown commit.title, project_commit_path(@project, commit.id), class: "cdark", title: commit.title
+                  .float-right
+                    = link_to commit.short_id, project_commit_path(@project, commit), class: "commit-sha"
+                   
+                .light
+                  = commit_author_link(commit, avatar: false)
+                  committed
+                  #{time_ago_with_tooltip(commit.committed_date)}
+            %td.line-numbers
+              - line_count = blame_group[:lines].count
+              - (current_line...(current_line + line_count)).each do |i|
+                %a.diff-line-num{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
+                  = icon("link")
+                  = i
+                \
+              - current_line += line_count
+            %td.lines
+              %pre.code.highlight
+                %code
+                  - blame_group[:lines].each do |line|
+                    #{line}

app/views/projects/blob/edit.html.haml

 - breadcrumb_title "Repository"
-- @no_container = true
 - page_title "Edit", @blob.path, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
 
-%div{ class: container_class }
-  - if @conflict
-    .alert.alert-danger
-      Someone edited the file the same time you did. Please check out
-      = link_to "the file", project_blob_path(@project, tree_join(@branch_name, @file_path)), target: "_blank", rel: 'noopener noreferrer'
-      and make sure your changes will not unintentionally remove theirs.
-  .editor-title-row
-    %h3.page-title.blob-edit-page-title
-      Edit file
-    = render 'template_selectors'
-  .file-editor
-    %ul.nav-links.no-bottom.js-edit-mode.nav.nav-tabs
-      %li.active
-        = link_to '#editor' do
-          Write
+- if @conflict
+  .alert.alert-danger
+    Someone edited the file the same time you did. Please check out
+    = link_to "the file", project_blob_path(@project, tree_join(@branch_name, @file_path)), target: "_blank", rel: 'noopener noreferrer'
+    and make sure your changes will not unintentionally remove theirs.
+.editor-title-row
+  %h3.page-title.blob-edit-page-title
+    Edit file
+  = render 'template_selectors'
+.file-editor
+  %ul.nav-links.no-bottom.js-edit-mode.nav.nav-tabs
+    %li.active
+      = link_to '#editor' do
+        Write
 
-      %li
-        = link_to '#preview', 'data-preview-url' => project_preview_blob_path(@project, @id) do
-          = editing_preview_title(@blob.name)
+    %li
+      = link_to '#preview', 'data-preview-url' => project_preview_blob_path(@project, @id) do
+        = editing_preview_title(@blob.name)
 
-    = form_tag(project_update_blob_path(@project, @id), method: :put, class: 'js-quick-submit js-requires-input js-edit-blob-form', data: blob_editor_paths(@project)) do
-      = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
-      = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}"
-      = hidden_field_tag 'last_commit_sha', @last_commit_sha
-      = hidden_field_tag 'content', '', id: "file-content"
-      = hidden_field_tag 'from_merge_request_iid', params[:from_merge_request_iid]
-      = render 'projects/commit_button', ref: @ref, cancel_path: project_blob_path(@project, @id)
+  = form_tag(project_update_blob_path(@project, @id), method: :put, class: 'js-quick-submit js-requires-input js-edit-blob-form', data: blob_editor_paths(@project)) do
+    = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
+    = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}"
+    = hidden_field_tag 'last_commit_sha', @last_commit_sha
+    = hidden_field_tag 'content', '', id: "file-content"
+    = hidden_field_tag 'from_merge_request_iid', params[:from_merge_request_iid]
+    = render 'projects/commit_button', ref: @ref, cancel_path: project_blob_path(@project, @id)

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

 - breadcrumb_title "Repository"
-- @no_container = true
-
 - page_title @blob.path, @ref
-
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit)
+
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
-%div{ class: container_class }
-  = render 'projects/last_push'
+= render 'projects/last_push'
 
-  #tree-holder.tree-holder
-    = render 'blob', blob: @blob
+#tree-holder.tree-holder
+  = render 'blob', blob: @blob
 
-    - if can_modify_blob?(@blob)
-      = render 'projects/blob/remove'
+  - if can_modify_blob?(@blob)
+    = render 'projects/blob/remove'
 
-    - title = "Replace #{@blob.name}"
-    = render 'projects/blob/upload', title: title, placeholder: title, button_title: 'Replace file', form_path: project_update_blob_path(@project, @id), method: :put
+  - title = "Replace #{@blob.name}"
+  = render 'projects/blob/upload', title: title, placeholder: title, button_title: 'Replace file', form_path: project_update_blob_path(@project, @id), method: :put

app/views/projects/branches/index.html.haml

-- @no_container = true
 - page_title _('Branches')
 - add_to_breadcrumbs(_('Repository'), project_tree_path(@project))
 
-%div{ class: container_class }
-  .top-area.adjust
-    %ul.nav-links.issues-state-filters.nav.nav-tabs
-      %li{ class: active_when(@mode == 'overview') }>
-        = link_to s_('Branches|Overview'), project_branches_path(@project), title: s_('Branches|Show overview of the branches')
+.top-area.adjust
+  %ul.nav-links.issues-state-filters.nav.nav-tabs
+    %li{ class: active_when(@mode == 'overview') }>
+      = link_to s_('Branches|Overview'), project_branches_path(@project), title: s_('Branches|Show overview of the branches')
 
-      %li{ class: active_when(@mode == 'active') }>
-        = link_to s_('Branches|Active'), project_branches_filtered_path(@project, state: 'active'), title: s_('Branches|Show active branches')
+    %li{ class: active_when(@mode == 'active') }>
+      = link_to s_('Branches|Active'), project_branches_filtered_path(@project, state: 'active'), title: s_('Branches|Show active branches')
 
-      %li{ class: active_when(@mode == 'stale') }>
-        = link_to s_('Branches|Stale'), project_branches_filtered_path(@project, state: 'stale'), title: s_('Branches|Show stale branches')
+    %li{ class: active_when(@mode == 'stale') }>
+      = link_to s_('Branches|Stale'), project_branches_filtered_path(@project, state: 'stale'), title: s_('Branches|Show stale branches')
 
-      %li{ class: active_when(!%w[overview active stale].include?(@mode)) }>
-        = link_to s_('Branches|All'), project_branches_filtered_path(@project, state: 'all'), title: s_('Branches|Show all branches')
+    %li{ class: active_when(!%w[overview active stale].include?(@mode)) }>
+      = link_to s_('Branches|All'), project_branches_filtered_path(@project, state: 'all'), title: s_('Branches|Show all branches')
 
-    .nav-controls
-      = form_tag(project_branches_filtered_path(@project, state: 'all'), method: :get) do
-        = search_field_tag :search, params[:search], { placeholder: s_('Branches|Filter by branch name'), id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
+  .nav-controls
+    = form_tag(project_branches_filtered_path(@project, state: 'all'), method: :get) do
+      = search_field_tag :search, params[:search], { placeholder: s_('Branches|Filter by branch name'), id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
-      - unless @mode == 'overview'
-        .dropdown.inline>
-          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-            %span.light
-              = branches_sort_options_hash[@sort]
-            = icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-            %li.dropdown-header
-              = s_('Branches|Sort by')
-            - branches_sort_options_hash.each do |value, title|
-              %li
-                = link_to title, project_branches_filtered_path(@project, state: 'all', search: params[:search], sort: value), class: ("is-active" if @sort == value)
+    - unless @mode == 'overview'
+      .dropdown.inline>
+        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+          %span.light
+            = branches_sort_options_hash[@sort]
+          = icon('chevron-down')
+        %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
+          %li.dropdown-header
+            = s_('Branches|Sort by')
+          - branches_sort_options_hash.each do |value, title|
+            %li
+              = link_to title, project_branches_filtered_path(@project, state: 'all', search: params[:search], sort: value), class: ("is-active" if @sort == value)
 
-      - if can? current_user, :push_code, @project
-        = link_to project_merged_branches_path(@project),
-          class: 'btn btn-inverted btn-remove has-tooltip qa-delete-merged-branches',
-          title: s_("Branches|Delete all branches that are merged into '%{default_branch}'") % { default_branch: @project.repository.root_ref },
-          method: :delete,
-          data: { confirm: s_('Branches|Deleting the merged branches cannot be undone. Are you sure?'),
-            container: 'body' } do
-          = s_('Branches|Delete merged branches')
-        = link_to new_project_branch_path(@project), class: 'btn btn-success' do
-          = s_('Branches|New branch')
+    - if can? current_user, :push_code, @project
+      = link_to project_merged_branches_path(@project),
+        class: 'btn btn-inverted btn-remove has-tooltip qa-delete-merged-branches',
+        title: s_("Branches|Delete all branches that are merged into '%{default_branch}'") % { default_branch: @project.repository.root_ref },
+        method: :delete,
+        data: { confirm: s_('Branches|Deleting the merged branches cannot be undone. Are you sure?'),
+          container: 'body' } do
+        = s_('Branches|Delete merged branches')
+      = link_to new_project_branch_path(@project), class: 'btn btn-success' do
+        = s_('Branches|New branch')
 
-  = render_if_exists 'projects/commits/mirror_status'
+= render_if_exists 'projects/commits/mirror_status'
 
-  .js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
-  - if can?(current_user, :admin_project, @project)
-    - project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
-    .row-content-block
-      %h5
-        = s_('Branches|Protected branches can be managed in %{project_settings_link}.').html_safe % { project_settings_link: project_settings_link }
+.js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
+- if can?(current_user, :admin_project, @project)
+  - project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
+  .row-content-block
+    %h5
+      = s_('Branches|Protected branches can be managed in %{project_settings_link}.').html_safe % { project_settings_link: project_settings_link }
 
-  - if @mode == 'overview' && (@active_branches.any? || @stale_branches.any?)
-    = render "projects/branches/panel", branches: @active_branches, state: 'active', panel_title: s_('Branches|Active branches'), show_more_text: s_('Branches|Show more active branches'), project: @project, overview_max_branches: @overview_max_branches
-    = render "projects/branches/panel", branches: @stale_branches, state: 'stale', panel_title: s_('Branches|Stale branches'), show_more_text: s_('Branches|Show more stale branches'), project: @project, overview_max_branches: @overview_max_branches
+- if @mode == 'overview' && (@active_branches.any? || @stale_branches.any?)
+  = render "projects/branches/panel", branches: @active_branches, state: 'active', panel_title: s_('Branches|Active branches'), show_more_text: s_('Branches|Show more active branches'), project: @project, overview_max_branches: @overview_max_branches
+  = render "projects/branches/panel", branches: @stale_branches, state: 'stale', panel_title: s_('Branches|Stale branches'), show_more_text: s_('Branches|Show more stale branches'), project: @project, overview_max_branches: @overview_max_branches
 
-  - elsif @branches.any?
-    %ul.content-list.all-branches
-      - @branches.each do |branch|
-        = render "projects/branches/branch", branch: branch, merged: @merged_branch_names.include?(branch.name)
-    = paginate @branches, theme: 'gitlab'
-  - else
-    .nothing-here-block
-      = s_('Branches|No branches to show')
+- elsif @branches.any?
+  %ul.content-list.all-branches
+    - @branches.each do |branch|
+      = render "projects/branches/branch", branch: branch, merged: @merged_branch_names.include?(branch.name)
+  = paginate @branches, theme: 'gitlab'
+- else
+  .nothing-here-block
+    = s_('Branches|No branches to show')
 
 = render 'projects/branches/delete_protected_modal'

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

+-# no_container is needed here because of full width side-by-side diff view
 - @no_container = true
 - add_to_breadcrumbs _('Commits'), project_commits_path(@project)
 - breadcrumb_title @commit.short_id

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

-- @no_container = true
 - breadcrumb_title _("Commits")
 
 - page_title _("Commits"), @ref
@@ -6,33 +5,32 @@
   = auto_discovery_link_tag(:atom, project_commits_path(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 
 .js-project-commits-show{ 'data-commits-limit' => @limit }
-  %div{ class: container_class }
-    .tree-holder
-      .nav-block
-        .tree-ref-container
-          .tree-ref-holder
-            = render 'shared/ref_switcher', destination: 'commits'
-
-          %ul.breadcrumb.repo-breadcrumb
-            = commits_breadcrumbs
-        .tree-controls.d-none.d-sm-none.d-md-block
-          - if @merge_request.present?
-            .control
-              = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'
-          - elsif create_mr_button?(@repository.root_ref, @ref)
-            .control
-              = link_to _("Create merge request"), create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success'
+  .tree-holder
+    .nav-block
+      .tree-ref-container
+        .tree-ref-holder
+          = render 'shared/ref_switcher', destination: 'commits'
 
+        %ul.breadcrumb.repo-breadcrumb
+          = commits_breadcrumbs
+      .tree-controls.d-none.d-sm-none.d-md-block
+        - if @merge_request.present?
           .control
-            = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form js-signature-container', data: { 'signatures-path' => namespace_project_signatures_path }) do
-              = search_field_tag :search, params[:search], { placeholder: _('Filter by commit message'), id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
+            = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'btn'
+        - elsif create_mr_button?(@repository.root_ref, @ref)
           .control
-            = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn' do
-              = icon("rss")
+            = link_to _("Create merge request"), create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success'
+
+        .control
+          = form_tag(project_commits_path(@project, @id), method: :get, class: 'commits-search-form js-signature-container', data: { 'signatures-path' => namespace_project_signatures_path }) do
+            = search_field_tag :search, params[:search], { placeholder: _('Filter by commit message'), id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
+        .control
+          = link_to project_commits_path(@project, @ref, rss_url_options), title: _("Commits feed"), class: 'btn' do
+            = icon("rss")
 
-    = render_if_exists 'projects/commits/mirror_status'
+  = render_if_exists 'projects/commits/mirror_status'
 
-    %div{ id: dom_id(@project) }
-      %ol#commits-list.list-unstyled.content_list
-        = render 'commits', project: @project, ref: @ref
-    = spinner
+  %div{ id: dom_id(@project) }
+    %ol#commits-list.list-unstyled.content_list
+      = render 'commits', project: @project, ref: @ref
+  = spinner

app/views/projects/compare/index.html.haml

-- @no_container = true
 - breadcrumb_title "Compare Revisions"
 - page_title "Compare"
 
-%div{ class: container_class }
-  %h3.page-title
-    = _("Compare Git revisions")
-  .sub-header-block
-    - example_master = capture do
-      %code.ref-name master
-    - example_sha = capture do
-      %code.ref-name 4eedf23
-    = (_("Choose a branch/tag (e.g. %{master}) or enter a commit (e.g. %{sha}) to see what's changed or to create a merge request.") % { master: example_master, sha: example_sha }).html_safe
-    %br
-    = (_("Changes are shown as if the <b>source</b> revision was being merged into the <b>target</b> revision.")).html_safe
+%h3.page-title
+  = _("Compare Git revisions")
+.sub-header-block
+  - example_master = capture do
+    %code.ref-name master
+  - example_sha = capture do
+    %code.ref-name 4eedf23
+  = (_("Choose a branch/tag (e.g. %{master}) or enter a commit (e.g. %{sha}) to see what's changed or to create a merge request.") % { master: example_master, sha: example_sha }).html_safe
+  %br
+  = (_("Changes are shown as if the <b>source</b> revision was being merged into the <b>target</b> revision.")).html_safe
 
-  .prepend-top-20
-    = render "form"
+.prepend-top-20
+  = render "form"

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

-- @no_container = true
 - add_to_breadcrumbs _("Compare Revisions"), project_compare_index_path(@project)
 - page_title "#{params[:from]}...#{params[:to]}"
 
-%div{ class: container_class }
-  .sub-header-block.no-bottom-space
-    = render "form"
+.sub-header-block.no-bottom-space
+  = render "form"
 
-  - if @commits.present?
-    = render "projects/commits/commit_list"
-    = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-compare"
-  - else
-    .card.bg-light
-      .center
-        %h4
-          = s_("CompareBranches|There isn't anything to compare.")
-        %p.slead
-          - if params[:to] == params[:from]
-            - source_branch = capture do
-              %span.ref-name= params[:from]
-            - target_branch = capture do
-              %span.ref-name= params[:to]
-            = (s_("CompareBranches|%{source_branch} and %{target_branch} are the same.") % { source_branch: source_branch, target_branch: target_branch }).html_safe
-          - else
-            = _("You'll need to use different branch names to get a valid comparison.")
+- if @commits.present?
+  = render "projects/commits/commit_list"
+  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment, diff_page_context: "is-compare"
+- else
+  .card.bg-light
+    .center
+      %h4
+        = s_("CompareBranches|There isn't anything to compare.")
+      %p.slead
+        - if params[:to] == params[:from]
+          - source_branch = capture do
+            %span.ref-name= params[:from]
+          - target_branch = capture do
+            %span.ref-name= params[:to]
+          = (s_("CompareBranches|%{source_branch} and %{target_branch} are the same.") % { source_branch: source_branch, target_branch: target_branch }).html_safe
+        - else
+          = _("You'll need to use different branch names to get a valid comparison.")

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

-- @no_container = true
 - page_title "Cycle Analytics"
 
-#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
+#cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data
     %banner{ "v-if" => "!isOverviewDialogDismissed",
       "documentation-link": help_page_path('user/project/cycle_analytics'),

app/views/projects/empty.html.haml

 - @content_class = "limit-container-width" unless fluid_layout
-- @no_container = true
 - breadcrumb_title _("Details")
 
 = render partial: 'flash_messages', locals: { project: @project }
 
-%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+%div{ class: [("limit-container-width" unless fluid_layout)] }
   = render "home_panel"
 
   %h4.prepend-top-0.append-bottom-8

app/views/projects/environments/edit.html.haml

-- @no_container = true
 - page_title _("Edit"), @environment.name, _("Environments")
 
-%div{ class: container_class }
-  %h3.page-title
-    = _('Edit environment')
-  %hr
-  = render 'form'
+%h3.page-title
+  = _('Edit environment')
+%hr
+= render 'form'

app/views/projects/environments/folder.html.haml

-- @no_container = true
 - page_title _("Environments")
 
-#environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data,
-  "css-class" => container_class } }
+#environments-folder-list-view{ data: { environments_data: environments_folder_list_view_data } }

app/views/projects/environments/index.html.haml

-- @no_container = true
 - page_title _("Environments")
 
 #environments-list-view{ data: { environments_data: environments_list_data,
@@ -6,5 +5,4 @@
   "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
   "new-environment-path" => new_project_environment_path(@project),
   "help-page-path" => help_page_path("ci/environments"),
-  "deploy-boards-help-path" => help_page_path("user/project/deploy_boards", anchor: "enabling-deploy-boards"),
-  "css-class" => container_class } }
+  "deploy-boards-help-path" => help_page_path("user/project/deploy_boards", anchor: "enabling-deploy-boards") } }

app/views/projects/environments/metrics.html.haml

-- @no_container = true
 - page_title _("Metrics for environment"), @environment.name
 
-.prometheus-container{ class: container_class }
+.prometheus-container
   #prometheus-graphs{ data: metrics_data(@project, @environment) }

app/views/projects/environments/new.html.haml

-- @no_container = true
 - breadcrumb_title _("Environments")
 - page_title _("New Environment")
 
-%div{ class: container_class }
-  %h3.page-title
-    = _("New environment")
-  %hr
-  = render 'form'
+%h3.page-title
+  = _("New environment")
+%hr
+= render 'form'

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

-- @no_container = true
 - add_to_breadcrumbs _("Environments"), project_environments_path(@project)
 - breadcrumb_title @environment.name
 - page_title _("Environments")
@@ -6,67 +5,66 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag 'page_bundles/xterm'
 
-%div{ class: container_class }
-  - if can?(current_user, :stop_environment, @environment)
-    #stop-environment-modal.modal.fade{ tabindex: -1 }
-      .modal-dialog
-        .modal-content
-          .modal-header
-            %h4.modal-title.d-flex.mw-100
-              = s_("Environments|Stopping")
-              %span.has-tooltip.text-truncate.ml-1.mr-1.flex-fill{ title: @environment.name, data: { container: '#stop-environment-modal' } }
-                = @environment.name
-              ?
-          .modal-body
-            %p= s_('Environments|Are you sure you want to stop this environment?')
-            - unless @environment.stop_action_available?
-              .warning_message
-                %p= s_('Environments|Note that this action will stop the environment, but it will %{emphasis_start}not%{emphasis_end} have an effect on any existing deployment due to no “stop environment action” being defined in the %{ci_config_link_start}.gitlab-ci.yml%{ci_config_link_end} file.').html_safe % { emphasis_start: '<strong>'.html_safe,
-                  emphasis_end: '</strong>'.html_safe,
-                  ci_config_link_start: '<a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">'.html_safe,
-                  ci_config_link_end: '</a>'.html_safe }
-                %a{ href: 'https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment',
-                  target: '_blank',
-                  rel: 'noopener noreferrer' }
-                  = s_('Environments|Learn more about stopping environments')
-          .modal-footer
-            = button_tag _('Cancel'), type: 'button', class: 'btn btn-cancel', data: { dismiss: 'modal' }
-            = button_to stop_project_environment_path(@project, @environment), class: 'btn btn-danger has-tooltip', method: :post do
-              = s_('Environments|Stop environment')
+- if can?(current_user, :stop_environment, @environment)
+  #stop-environment-modal.modal.fade{ tabindex: -1 }
+    .modal-dialog
+      .modal-content
+        .modal-header
+          %h4.modal-title.d-flex.mw-100
+            = s_("Environments|Stopping")
+            %span.has-tooltip.text-truncate.ml-1.mr-1.flex-fill{ title: @environment.name, data: { container: '#stop-environment-modal' } }
+              = @environment.name
+            ?
+        .modal-body
+          %p= s_('Environments|Are you sure you want to stop this environment?')
+          - unless @environment.stop_action_available?
+            .warning_message
+              %p= s_('Environments|Note that this action will stop the environment, but it will %{emphasis_start}not%{emphasis_end} have an effect on any existing deployment due to no “stop environment action” being defined in the %{ci_config_link_start}.gitlab-ci.yml%{ci_config_link_end} file.').html_safe % { emphasis_start: '<strong>'.html_safe,
+                emphasis_end: '</strong>'.html_safe,
+                ci_config_link_start: '<a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">'.html_safe,
+                ci_config_link_end: '</a>'.html_safe }
+              %a{ href: 'https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment',
+                target: '_blank',
+                rel: 'noopener noreferrer' }
+                = s_('Environments|Learn more about stopping environments')
+        .modal-footer
+          = button_tag _('Cancel'), type: 'button', class: 'btn btn-cancel', data: { dismiss: 'modal' }
+          = button_to stop_project_environment_path(@project, @environment), class: 'btn btn-danger has-tooltip', method: :post do
+            = s_('Environments|Stop environment')
 
-  .top-area
-    %h3.page-title= @environment.name
-    .nav-controls.ml-auto.my-2
-      = render 'projects/environments/terminal_button', environment: @environment
-      = render 'projects/environments/external_url', environment: @environment
-      = render 'projects/environments/metrics_button', environment: @environment
-      - if can?(current_user, :update_environment, @environment)
-        = link_to _('Edit'), edit_project_environment_path(@project, @environment), class: 'btn'
-      - if can?(current_user, :stop_environment, @environment)
-        = button_tag class: 'btn btn-danger', type: 'button', data: { toggle: 'modal',
-          target: '#stop-environment-modal' } do
-          = sprite_icon('stop')
-          = s_('Environments|Stop')
+.top-area
+  %h3.page-title= @environment.name
+  .nav-controls.ml-auto.my-2
+    = render 'projects/environments/terminal_button', environment: @environment
+    = render 'projects/environments/external_url', environment: @environment
+    = render 'projects/environments/metrics_button', environment: @environment
+    - if can?(current_user, :update_environment, @environment)
+      = link_to _('Edit'), edit_project_environment_path(@project, @environment), class: 'btn'
+    - if can?(current_user, :stop_environment, @environment)
+      = button_tag class: 'btn btn-danger', type: 'button', data: { toggle: 'modal',
+        target: '#stop-environment-modal' } do
+        = sprite_icon('stop')
+        = s_('Environments|Stop')
 
-  .environments-container
-    - if @deployments.blank?
-      .empty-state
-        .text-content
-          %h4.state-title
-            = _("You don't have any deployments right now.")
-          %p.blank-state-text
-            = _("Define environments in the deploy stage(s) in <code>.gitlab-ci.yml</code> to track deployments here.").html_safe
-          .text-center
-            = link_to _("Read more"), help_page_path("ci/environments"), class: "btn btn-success"
-    - else
-      .table-holder
-        .ci-table.environments{ role: 'grid' }
-          .gl-responsive-table-row.table-row-header{ role: 'row' }
-            .table-section.section-10{ role: 'columnheader' }= _('ID')
-            .table-section.section-30{ role: 'columnheader' }= _('Commit')
-            .table-section.section-25{ role: 'columnheader' }= _('Job')
-            .table-section.section-15{ role: 'columnheader' }= _('Created')
+.environments-container
+  - if @deployments.blank?
+    .empty-state
+      .text-content
+        %h4.state-title
+          = _("You don't have any deployments right now.")
+        %p.blank-state-text
+          = _("Define environments in the deploy stage(s) in <code>.gitlab-ci.yml</code> to track deployments here.").html_safe
+        .text-center
+          = link_to _("Read more"), help_page_path("ci/environments"), class: "btn btn-success"
+  - else
+    .table-holder
+      .ci-table.environments{ role: 'grid' }
+        .gl-responsive-table-row.table-row-header{ role: 'row' }
+          .table-section.section-10{ role: 'columnheader' }= _('ID')
+          .table-section.section-30{ role: 'columnheader' }= _('Commit')
+          .table-section.section-25{ role: 'columnheader' }= _('Job')
+          .table-section.section-15{ role: 'columnheader' }= _('Created')
 
-          = render @deployments
+        = render @deployments
 
-      = paginate @deployments, theme: 'gitlab'
+    = paginate @deployments, theme: 'gitlab'

app/views/projects/environments/terminal.html.haml

-- @no_container = true
 - page_title _("Terminal for environment"), @environment.name
 
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag "xterm.css"
 
-%div{ class: container_class }
-  .top-area
-    .row
-      .col-sm-6
-        %h3.page-title
-          = _("Terminal for environment")
-          = @environment.name
+.top-area
+  .row
+    .col-sm-6
+      %h3.page-title
+        = _("Terminal for environment")
+        = @environment.name
 
-      .col-sm-6
-        .nav-controls
-          - if @environment.external_url.present?
-            = link_to @environment.external_url, class: 'btn btn-default', target: '_blank', rel: 'noopener noreferrer nofollow' do
-              = sprite_icon('external-link')
-          = render 'projects/deployments/actions', deployment: @environment.last_deployment
+    .col-sm-6
+      .nav-controls
+        - if @environment.external_url.present?
+          = link_to @environment.external_url, class: 'btn btn-default', target: '_blank', rel: 'noopener noreferrer nofollow' do
+            = sprite_icon('external-link')
+        = render 'projects/deployments/actions', deployment: @environment.last_deployment
 
 .terminal-container{ class: container_class }
   #terminal{ data: { project_path: "#{terminal_project_environment_path(@project, @environment)}.ws" } }

app/views/projects/graphs/charts.html.haml

-- @no_container = true
 - page_title _("Contribution Charts")
 
-.repo-charts{ class: container_class }
+.repo-charts
   %h4.sub-header
     = _("Programming languages used in this repository")
 
@@ -20,7 +19,7 @@
     .col-md-8
       %canvas#languages-chart{ height: 400 }
 
-.repo-charts{ class: container_class }
+.repo-charts
   .sub-header-block.border-top
 
   .row.tree-ref-header

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

-- @no_container = true
 - page_title _('Contributors')
 
-.js-graphs-show{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
+.js-graphs-show{ 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }
   .sub-header-block
     .tree-ref-holder.inline.vertical-align-middle
       = render 'shared/ref_switcher', destination: 'graphs'

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

 - page_title import_in_progress_title
-- @no_container = true
 - @content_class = "limit-container-width" unless fluid_layout
 
 .save-project-loader

app/views/projects/issues/index.html.haml

-- @no_container = true
 - @can_bulk_update = can?(current_user, :admin_issue, @project)
 
 - page_title "Issues"
@@ -8,18 +7,17 @@
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
 
 - if project_issues(@project).exists?
-  %div{ class: (container_class) }
-    .top-area
-      = render 'shared/issuable/nav', type: :issues
-      = render "projects/issues/nav_btns"
-    = render 'shared/issuable/search_bar', type: :issues
+  .top-area
+    = render 'shared/issuable/nav', type: :issues
+    = render "projects/issues/nav_btns"
+  = render 'shared/issuable/search_bar', type: :issues
 
-    - if @can_bulk_update
-      = render 'shared/issuable/bulk_update_sidebar', type: :issues
+  - if @can_bulk_update
+    = render 'shared/issuable/bulk_update_sidebar', type: :issues
 
-    .issues-holder
-      = render 'issues'
-      - if new_issue_email
-        = render 'projects/issuable_by_email', email: new_issue_email, issuable_type: 'issue'
+  .issues-holder
+    = render 'issues'
+    - if new_issue_email
+      = render 'projects/issuable_by_email', email: new_issue_email, issuable_type: 'issue'
 - else
   = render 'shared/empty_states/issues', button_path: new_project_issue_path(@project), show_import_button: true

app/views/projects/jobs/index.html.haml

-- @no_container = true
 - page_title "Jobs"
 
-%div{ class: container_class }
-  .top-area
-    - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
-    = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
+.top-area
+  - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
+  = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
-    .nav-controls
-      - if can?(current_user, :update_build, @project)
-        - unless @repository.gitlab_ci_yml
-          = link_to 'Get started with Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
+  .nav-controls
+    - if can?(current_user, :update_build, @project)
+      - unless @repository.gitlab_ci_yml
+        = link_to 'Get started with Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
 
-        = link_to project_ci_lint_path(@project), class: 'btn btn-default' do
-          %span CI lint
+      = link_to project_ci_lint_path(@project), class: 'btn btn-default' do
+        %span CI lint
 
-  .content-list.builds-content-list
-    = render "table", builds: @builds, project: @project
+.content-list.builds-content-list
+  = render "table", builds: @builds, project: @project

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

-- @no_container = true
 - add_to_breadcrumbs _("Jobs"), project_jobs_path(@project)
 - breadcrumb_title "##{@build.id}"
 - page_title "#{@build.name} (##{@build.id})", _("Jobs")
@@ -6,11 +5,10 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag 'page_bundles/xterm'
 
-%div{ class: container_class }
-  #js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json), project_path: @project.full_path,
-    deployment_help_url: help_page_path('user/project/clusters/index.html', anchor: 'troubleshooting-failed-deployment-jobs'),
-    runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner'),
-    runner_settings_url: project_runners_path(@build.project, anchor: 'js-runners-settings'),
-    variables_settings_url: project_variables_path(@build.project, anchor: 'js-cicd-variables-settings'),
-    page_path: project_job_path(@project, @build), build_status: @build.status, build_stage: @build.stage, log_state: '',
-    build_options: javascript_build_options } }
+#js-job-vue-app{ data: { endpoint: project_job_path(@project, @build, format: :json), project_path: @project.full_path,
+  deployment_help_url: help_page_path('user/project/clusters/index.html', anchor: 'troubleshooting-failed-deployment-jobs'),
+  runner_help_url: help_page_path('ci/runners/README.html', anchor: 'setting-maximum-job-timeout-for-a-runner'),
+  runner_settings_url: project_runners_path(@build.project, anchor: 'js-runners-settings'),
+  variables_settings_url: project_variables_path(@build.project, anchor: 'js-cicd-variables-settings'),
+  page_path: project_job_path(@project, @build), build_status: @build.status, build_stage: @build.stage, log_state: '',
+  build_options: javascript_build_options } }

app/views/projects/jobs/terminal.html.haml

-- @no_container = true
 - add_to_breadcrumbs 'Jobs', project_jobs_path(@project)
 - add_to_breadcrumbs "##{@build.id}", project_job_path(@project, @build)
 - breadcrumb_title 'Terminal'
@@ -7,5 +6,5 @@
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag "xterm.css"
 
-.terminal-container{ class: container_class }
+.terminal-container
   #terminal{ data: { project_path: terminal_project_job_path(@project, @build, format: :ws) } }

app/views/projects/labels/edit.html.haml

-- @no_container = true
 - add_to_breadcrumbs "Labels", project_labels_path(@project)
 - breadcrumb_title "Edit"
 - page_title "Edit", @label.name, "Labels"
 
-%div{ class: container_class }
-  %h3.page-title
-    Edit Label
-  %hr
-  = render 'shared/labels/form', url: project_label_path(@project, @label), back_path: project_labels_path(@project)
+%h3.page-title
+  Edit Label
+%hr
+= render 'shared/labels/form', url: project_label_path(@project, @label), back_path: project_labels_path(@project)

app/views/projects/labels/index.html.haml

-- @no_container = true
 - page_title "Labels"
 - can_admin_label = can?(current_user, :admin_label, @project)
 - search = params[:search]
@@ -7,48 +6,47 @@
 
 - if labels_or_filters
   #promote-label-modal
-  %div{ class: container_class }
-    = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
+  = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-    .labels-container.prepend-top-10
-      - if can_admin_label && search.blank?
-        %p.text-muted
-          = _('Labels can be applied to issues and merge requests.')
-          %br
-          = _('Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.')
+  .labels-container.prepend-top-10
+    - if can_admin_label && search.blank?
+      %p.text-muted
+        = _('Labels can be applied to issues and merge requests.')
+        %br
+        = _('Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.')
 
-      -# Only show it in the first page
-      - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
-      .prioritized-labels{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
-        %h5.prepend-top-10= _('Prioritized Labels')
-        .content-list.manage-labels-list.js-prioritized-labels{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
-          #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
-            = render 'shared/empty_states/priority_labels'
-          - if @prioritized_labels.present?
-            = render partial: 'shared/label', collection: @prioritized_labels, as: :label, locals: { force_priority: true, subject: @project }
-          - elsif search.present?
-            .nothing-here-block
-              = _('No prioritised labels with such name or description')
+    -# Only show it in the first page
+    - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
+    .prioritized-labels{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
+      %h5.prepend-top-10= _('Prioritized Labels')
+      .content-list.manage-labels-list.js-prioritized-labels{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
+        #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
+          = render 'shared/empty_states/priority_labels'
+        - if @prioritized_labels.present?
+          = render partial: 'shared/label', collection: @prioritized_labels, as: :label, locals: { force_priority: true, subject: @project }
+        - elsif search.present?
+          .nothing-here-block
+            = _('No prioritised labels with such name or description')
 
-      - if @labels.present?
-        .other-labels
-          %h5{ class: ('hide' if hide) }= _('Other Labels')
-          .content-list.manage-labels-list.js-other-labels
-            = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
-            = paginate @labels, theme: 'gitlab'
-      - elsif search.present?
-        .other-labels
-          - if @available_labels.any?
-            %h5
-              = _('Other Labels')
-            .nothing-here-block
-              = _('No other labels with such name or description')
-          - else
-            .nothing-here-block
-              = _('No labels with such name or description')
-      - elsif subscribed.present?
-        .nothing-here-block
-          = _('You do not have any subscriptions yet')
+    - if @labels.present?
+      .other-labels
+        %h5{ class: ('hide' if hide) }= _('Other Labels')
+        .content-list.manage-labels-list.js-other-labels
+          = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
+          = paginate @labels, theme: 'gitlab'
+    - elsif search.present?
+      .other-labels
+        - if @available_labels.any?
+          %h5
+            = _('Other Labels')
+          .nothing-here-block
+            = _('No other labels with such name or description')
+        - else
+          .nothing-here-block
+            = _('No labels with such name or description')
+    - elsif subscribed.present?
+      .nothing-here-block
+        = _('You do not have any subscriptions yet')
 
 - else
   = render 'shared/empty_states/labels'

app/views/projects/labels/new.html.haml

-- @no_container = true
 - add_to_breadcrumbs "Labels", project_labels_path(@project)
 - breadcrumb_title "New"
 - page_title "New Label"
 
-%div{ class: container_class }
-  %h3.page-title
-    New Label
-  %hr
-  = render 'shared/labels/form', url: project_labels_path(@project), back_path: project_labels_path(@project)
+%h3.page-title
+  New Label
+%hr
+= render 'shared/labels/form', url: project_labels_path(@project), back_path: project_labels_path(@project)

app/views/projects/merge_requests/index.html.haml

-- @no_container = true
 - @can_bulk_update = can?(current_user, :admin_merge_request, @project)
 - merge_project = merge_request_source_project_for_project(@project)
 - new_merge_request_path = project_new_merge_request_path(merge_project) if merge_project
@@ -6,24 +5,22 @@
 - page_title "Merge Requests"
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
 
-%div{ class: container_class }
-  = render 'projects/last_push'
+= render 'projects/last_push'
 
 - if @project.merge_requests.exists?
-  %div{ class: container_class }
-    .top-area
-      = render 'shared/issuable/nav', type: :merge_requests
-      .nav-controls
-        = render "projects/merge_requests/nav_btns", merge_project: merge_project, new_merge_request_path: new_merge_request_path
+  .top-area
+    = render 'shared/issuable/nav', type: :merge_requests
+    .nav-controls
+      = render "projects/merge_requests/nav_btns", merge_project: merge_project, new_merge_request_path: new_merge_request_path
 
-    = render 'shared/issuable/search_bar', type: :merge_requests
+  = render 'shared/issuable/search_bar', type: :merge_requests
 
-    - if @can_bulk_update
-      = render 'shared/issuable/bulk_update_sidebar', type: :merge_requests
+  - if @can_bulk_update
+    = render 'shared/issuable/bulk_update_sidebar', type: :merge_requests
 
-    .merge-requests-holder
-      = render 'merge_requests'
-      - if new_merge_request_email
-        = render 'projects/issuable_by_email', email: new_merge_request_email, issuable_type: 'merge_request'
+  .merge-requests-holder
+    = render 'merge_requests'
+    - if new_merge_request_email
+      = render 'projects/issuable_by_email', email: new_merge_request_email, issuable_type: 'merge_request'
 - else
   = render 'shared/empty_states/merge_requests', button_path: new_merge_request_path

app/views/projects/milestones/edit.html.haml

-- @no_container = true
 - breadcrumb_title _('Edit')
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
 - page_title _('Edit'), @milestone.title, _('Milestones')
 
+%h3.page-title
+  = _('Edit Milestone')
 
-%div{ class: container_class }
+%hr
 
-  %h3.page-title
-    = _('Edit Milestone')
-
-  %hr
-
-  = render 'form'
+= render 'form'

app/views/projects/milestones/index.html.haml

-- @no_container = true
 - page_title _('Milestones')
 
-%div{ class: container_class }
-  .top-area
-    = render 'shared/milestones_filter', counts: milestone_counts(@project.milestones)
+.top-area
+  = render 'shared/milestones_filter', counts: milestone_counts(@project.milestones)
 
-    .nav-controls
-      = render 'shared/milestones/search_form'
-      = render 'shared/milestones_sort_dropdown'
-      - if can?(current_user, :admin_milestone, @project)
-        = link_to new_project_milestone_path(@project), class: 'btn btn-success qa-new-project-milestone', title: _('New milestone') do
-          = _('New milestone')
+  .nav-controls
+    = render 'shared/milestones/search_form'
+    = render 'shared/milestones_sort_dropdown'
+    - if can?(current_user, :admin_milestone, @project)
+      = link_to new_project_milestone_path(@project), class: 'btn btn-success qa-new-project-milestone', title: _('New milestone') do
+        = _('New milestone')
 
-  .milestones
-    #delete-milestone-modal
-    #promote-milestone-modal
+.milestones
+  #delete-milestone-modal
+  #promote-milestone-modal
 
-    %ul.content-list
-      = render @milestones
+  %ul.content-list
+    = render @milestones
 
-      - if @milestones.blank?
-        %li
-          .nothing-here-block= _('No milestones to show')
+    - if @milestones.blank?
+      %li
+        .nothing-here-block= _('No milestones to show')
 
-    = paginate @milestones, theme: 'gitlab'
+  = paginate @milestones, theme: 'gitlab'

app/views/projects/milestones/new.html.haml

-- @no_container = true
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
 - breadcrumb_title _('New')
 - page_title _('New Milestone')
 
-%div{ class: container_class }
-  %h3.page-title
-    = _('New Milestone')
+%h3.page-title
+  = _('New Milestone')
 
-  %hr
+%hr
 
-  = render 'form'
+= render 'form'

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

-- @no_container = true
 - add_to_breadcrumbs _('Milestones'), project_milestones_path(@project)
 - breadcrumb_title @milestone.title
 - page_title       @milestone.title, _('Milestones')
 - page_description @milestone.description
 
-%div{ class: container_class }
-  .detail-page-header.milestone-page-header
-    .status-box{ class: status_box_class(@milestone) }
-      - if @milestone.closed?
-        = _('Closed')
-      - elsif @milestone.expired?
-        = _('Past due')
-      - elsif @milestone.upcoming?
-        = _('Upcoming')
-      - else
-        = _('Open')
-    .header-text-content
-      %span.identifier
-        %strong
-          = _('Milestone')
-      - if @milestone.due_date || @milestone.start_date
-        = milestone_date_range(@milestone)
-    .milestone-buttons
-      - if can?(current_user, :admin_milestone, @project)
-        = link_to edit_project_milestone_path(@project, @milestone), class: 'btn btn-grouped btn-nr' do
-          = _('Edit')
+.detail-page-header.milestone-page-header
+  .status-box{ class: status_box_class(@milestone) }
+    - if @milestone.closed?
+      = _('Closed')
+    - elsif @milestone.expired?
+      = _('Past due')
+    - elsif @milestone.upcoming?
+      = _('Upcoming')
+    - else
+      = _('Open')
+  .header-text-content
+    %span.identifier
+      %strong
+        = _('Milestone')
+    - if @milestone.due_date || @milestone.start_date
+      = milestone_date_range(@milestone)
+  .milestone-buttons
+    - if can?(current_user, :admin_milestone, @project)
+      = link_to edit_project_milestone_path(@project, @milestone), class: 'btn btn-grouped btn-nr' do
+        = _('Edit')
 
-        - if @project.group
-          %button.js-promote-project-milestone-button.btn.btn-grouped{ data: { toggle: 'modal',
-            target: '#promote-milestone-modal',
-            milestone_title: @milestone.title,
-            group_name: @project.group.name,
-            url: promote_project_milestone_path(@milestone.project, @milestone),
-            container: 'body' },
-            disabled: true,
-            type: 'button' }
-            = _('Promote')
-          #promote-milestone-modal
+      - if @project.group
+        %button.js-promote-project-milestone-button.btn.btn-grouped{ data: { toggle: 'modal',
+          target: '#promote-milestone-modal',
+          milestone_title: @milestone.title,
+          group_name: @project.group.name,
+          url: promote_project_milestone_path(@milestone.project, @milestone),
+          container: 'body' },
+          disabled: true,
+          type: 'button' }
+          = _('Promote')
+        #promote-milestone-modal
 
-        - if @milestone.active?
-          = link_to _('Close milestone'), project_milestone_path(@project, @milestone, milestone: {state_event: :close }), method: :put, class: 'btn btn-close btn-nr btn-grouped'
-        - else
-          = link_to _('Reopen milestone'), project_milestone_path(@project, @milestone, milestone: {state_event: :activate }), method: :put, class: 'btn btn-reopen btn-nr btn-grouped'
+      - if @milestone.active?
+        = link_to _('Close milestone'), project_milestone_path(@project, @milestone, milestone: {state_event: :close }), method: :put, class: 'btn btn-close btn-nr btn-grouped'
+      - else
+        = link_to _('Reopen milestone'), project_milestone_path(@project, @milestone, milestone: {state_event: :activate }), method: :put, class: 'btn btn-reopen btn-nr btn-grouped'
 
-        = render 'shared/milestones/delete_button'
+      = render 'shared/milestones/delete_button'
 
-      %a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: '#' }
-        = icon('angle-double-left')
+    %a.btn.btn-default.btn-grouped.float-right.d-block.d-sm-none.js-sidebar-toggle{ href: '#' }
+      = icon('angle-double-left')
 
-  .detail-page-description.milestone-detail
-    %h2.title.qa-milestone-title
-      = markdown_field(@milestone, :title)
+.detail-page-description.milestone-detail
+  %h2.title.qa-milestone-title
+    = markdown_field(@milestone, :title)
 
-    %div
-      - if @milestone.description.present?
-        .description.md
-          = markdown_field(@milestone, :description)
+  %div
+    - if @milestone.description.present?
+      .description.md
+        = markdown_field(@milestone, :description)
 
-  = render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
+= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
 
-  - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count(current_user).zero?
-    .alert.alert-success.prepend-top-default
-      %span= _('Assign some issues to this milestone.')
-  - elsif @milestone.complete?(current_user) && @milestone.active?
-    .alert.alert-success.prepend-top-default
-      %span= _('All issues for this milestone are closed. You may close this milestone now.')
+- if can?(current_user, :read_issue, @project) && @milestone.total_issues_count(current_user).zero?
+  .alert.alert-success.prepend-top-default
+    %span= _('Assign some issues to this milestone.')
+- elsif @milestone.complete?(current_user) && @milestone.active?
+  .alert.alert-success.prepend-top-default
+    %span= _('All issues for this milestone are closed. You may close this milestone now.')
 
-  = render 'shared/milestones/tabs', milestone: @milestone
-  = render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153
+= render 'shared/milestones/tabs', milestone: @milestone
+= render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153

app/views/projects/network/_head.html.haml

-- @no_container = true
+.row-content-block.second-block.content-component-block
+  .tree-ref-holder
+    = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
 
-%div{ class: container_class }
-  .row-content-block.second-block.content-component-block
-    .tree-ref-holder
-      = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
-
-    .oneline
-      = _("You can move around the graph by using the arrow keys.")
+  .oneline
+    = _("You can move around the graph by using the arrow keys.")

app/views/projects/pipeline_schedules/index.html.haml

 - breadcrumb_title _("Schedules")
 
-- @no_container = true
 - page_title _("Pipeline Schedules")
 
-%div{ class: container_class }
-  #pipeline-schedules-callout{ data: { docs_url: help_page_path('user/project/pipelines/schedules') } }
-  .top-area
-    - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
-    = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
+#pipeline-schedules-callout{ data: { docs_url: help_page_path('user/project/pipelines/schedules') } }
+.top-area
+  - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
+  = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope
 
-    - if can?(current_user, :create_pipeline_schedule, @project)
-      .nav-controls
-        = link_to new_project_pipeline_schedule_path(@project), class: 'btn btn-success' do
-          %span= _('New schedule')
+  - if can?(current_user, :create_pipeline_schedule, @project)
+    .nav-controls
+      = link_to new_project_pipeline_schedule_path(@project), class: 'btn btn-success' do
+        %span= _('New schedule')
 
-  - if @schedules.present?
-    %ul.content-list
-      = render partial: "table"
-  - else
-    .card.bg-light
-      .nothing-here-block= _("No schedules")
+- if @schedules.present?
+  %ul.content-list
+    = render partial: "table"
+- else
+  .card.bg-light
+    .nothing-here-block= _("No schedules")

app/views/projects/pipelines/charts.html.haml

-- @no_container = true
 - page_title _('CI / CD Charts')
 
-%div{ class: container_class }
-
-  #charts.ci-charts
-    = render 'projects/pipelines/charts/overall'
-
-    %hr
-    = render 'projects/pipelines/charts/pipelines'
+#charts.ci-charts
+  = render 'projects/pipelines/charts/overall'
+  %hr
+  = render 'projects/pipelines/charts/pipelines'

app/views/projects/pipelines/index.html.haml

-- @no_container = true
 - page_title _('Pipelines')
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 
-%div{ 'class' => container_class }
-  #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
-    "help-page-path" => help_page_path('ci/quick_start/README'),
-    "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
-    "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
-    "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
-    "no-pipelines-svg-path" => image_path('illustrations/pipelines_pending.svg'),
-    "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
-    "new-pipeline-path" => can?(current_user, :create_pipeline, @project) && new_project_pipeline_path(@project),
-    "ci-lint-path" => can?(current_user, :create_pipeline, @project) && project_ci_lint_path(@project),
-    "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project) ,
-    "has-gitlab-ci" => (@project.has_ci? && @project.builds_enabled?).to_s } }
+#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
+  "help-page-path" => help_page_path('ci/quick_start/README'),
+  "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
+  "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
+  "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
+  "no-pipelines-svg-path" => image_path('illustrations/pipelines_pending.svg'),
+  "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
+  "new-pipeline-path" => can?(current_user, :create_pipeline, @project) && new_project_pipeline_path(@project),
+  "ci-lint-path" => can?(current_user, :create_pipeline, @project) && project_ci_lint_path(@project),
+  "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project) ,
+  "has-gitlab-ci" => (@project.has_ci? && @project.builds_enabled?).to_s } }

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

-- @no_container = true
 - add_to_breadcrumbs _('Pipelines'), project_pipelines_path(@project)
 - breadcrumb_title "##{@pipeline.id}"
 - page_title _('Pipeline')
 
-.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
+.js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue.pipeline-header-container
 
   - if @pipeline.commit.present?

app/views/projects/releases/index.html.haml

-- @no_container = true
 - page_title _('Releases')
 
-%div{ class: container_class }
-  #js-releases-page{ data: { project_id: @project.id, illustration_path: image_path('illustrations/releases.svg'), documentation_path: help_page_path('user/project/releases/index') } }
+#js-releases-page{ data: { project_id: @project.id, illustration_path: image_path('illustrations/releases.svg'), documentation_path: help_page_path('user/project/releases/index') } }

app/views/projects/serverless/functions/index.html.haml

-- @no_container = true
 - @content_class = "limit-container-width" unless fluid_layout
 - breadcrumb_title 'Serverless'
 - page_title 'Serverless'
@@ -10,7 +9,7 @@
   clusters_path: clusters_path,
   help_path: help_page_path('user/project/clusters/serverless/index') } }
 
-%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
+%div{ class: [('limit-container-width' unless fluid_layout)] }
   .js-serverless-functions-notice
     .flash-container
 

app/views/projects/serverless/functions/show.html.haml

-- @no_container = true
 - @content_class = "limit-container-width" unless fluid_layout
 - clusters_path = project_clusters_path(@project)
 - help_path = help_page_path('user/project/clusters/serverless/index')
@@ -12,7 +11,7 @@
   clusters_path: clusters_path,
   help_path: help_path } }
 
-%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
+%div{ class: [('limit-container-width' unless fluid_layout)] }
   .serverless-function-details#js-serverless-function-details
 
   .js-serverless-function-notice

app/views/projects/show.html.haml

-- @no_container = true
 - breadcrumb_title _("Details")
 - @content_class = "limit-container-width" unless fluid_layout
 
@@ -11,7 +10,7 @@
   - signatures_path = project_signatures_path(@project, @project.default_branch)
   .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
-%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+%div{ class: [("limit-container-width" unless fluid_layout)] }
   = render "projects/last_push"
 
   = render "home_panel"

app/views/projects/tags/index.html.haml

-- @no_container = true
 - @sort ||= sort_value_recently_updated
 - page_title s_('TagsPage|Tags')
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_tags_url(@project, rss_url_options), title: "#{@project.name} tags")
 
-.flex-list{ class: container_class }
+.flex-list
   .top-area.adjust
     .nav-text.row-main-content
       = s_('TagsPage|Tags give the ability to mark specific points in history as being important')

app/views/projects/tags/releases/edit.html.haml

-- @no_container = true
 - add_to_breadcrumbs "Tags", project_tags_path(@project)
 - breadcrumb_title @tag.name
 - page_title "Edit", @tag.name, "Tags"
 
-%div{ class: container_class }
-  .sub-header-block.no-bottom-space
-    .oneline
-      .title
-        Release notes for tag
-        %strong= @tag.name
+.sub-header-block.no-bottom-space
+  .oneline
+    .title
+      Release notes for tag
+      %strong= @tag.name
 
-
-  = form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name),
-             html: { class: 'common-note-form release-form js-quick-submit' }) do |f|
-    = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
-      = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
-      = render 'shared/notes/hints'
-    .error-alert
-    .prepend-top-default
-      = f.submit 'Save changes', class: 'btn btn-success'
-      = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn btn-default btn-cancel"
+= form_for(@release, method: :put, url: project_tag_release_path(@project, @tag.name),
+            html: { class: 'common-note-form release-form js-quick-submit' }) do |f|
+  = render layout: 'projects/md_preview', locals: { url: preview_markdown_path(@project), referenced_users: true } do
+    = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here…"
+    = render 'shared/notes/hints'
+  .error-alert
+  .prepend-top-default
+    = f.submit 'Save changes', class: 'btn btn-success'
+    = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn btn-default btn-cancel"

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

-- @no_container = true
 - add_to_breadcrumbs s_('TagsPage|Tags'), project_tags_path(@project)
 - breadcrumb_title @tag.name
 - page_title @tag.name, s_('TagsPage|Tags')
 
-%div{ class: container_class }
-  .top-area.multi-line.flex-wrap
-    .nav-text
-      .title
-        %span.item-title.ref-name
-          = icon('tag')
-          = @tag.name
-        - if protected_tag?(@project, @tag)
-          %span.badge.badge-success
-            = s_('TagsPage|protected')
-      - if @commit
-        = render 'projects/branches/commit', commit: @commit, project: @project
-      - else
-        = s_("TagsPage|Can't find HEAD commit for this tag")
+.top-area.multi-line.flex-wrap
+  .nav-text
+    .title
+      %span.item-title.ref-name
+        = icon('tag')
+        = @tag.name
+      - if protected_tag?(@project, @tag)
+        %span.badge.badge-success
+          = s_('TagsPage|protected')
+    - if @commit
+      = render 'projects/branches/commit', commit: @commit, project: @project
+    - else
+      = s_("TagsPage|Can't find HEAD commit for this tag")
 
-    .nav-controls
-      - if can?(current_user, :admin_tag, @project)
-        = link_to edit_project_tag_release_path(@project, @tag.name), class: 'btn btn-edit controls-item has-tooltip', title: s_('TagsPage|Edit release notes') do
-          = icon("pencil")
-      = link_to project_tree_path(@project, @tag.name), class: 'btn controls-item has-tooltip', title: s_('TagsPage|Browse files') do
-        = sprite_icon('folder-open')
-      = link_to project_commits_path(@project, @tag.name), class: 'btn controls-item has-tooltip', title: s_('TagsPage|Browse commits') do
-        = icon('history')
-      .btn-container.controls-item
-        = render 'projects/buttons/download', project: @project, ref: @tag.name
-      - if can?(current_user, :admin_tag, @project)
-        .btn-container.controls-item-full
-          = link_to project_tag_path(@project, @tag.name), class: "btn btn-remove remove-row has-tooltip #{protected_tag?(@project, @tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), method: :delete, data: { confirm: s_('TagsPage|Deleting the %{tag_name} tag cannot be undone. Are you sure?') % { tag_name: @tag.name } } do
-            %i.fa.fa-trash-o
+  .nav-controls
+    - if can?(current_user, :admin_tag, @project)
+      = link_to edit_project_tag_release_path(@project, @tag.name), class: 'btn btn-edit controls-item has-tooltip', title: s_('TagsPage|Edit release notes') do
+        = icon("pencil")
+    = link_to project_tree_path(@project, @tag.name), class: 'btn controls-item has-tooltip', title: s_('TagsPage|Browse files') do
+      = sprite_icon('folder-open')
+    = link_to project_commits_path(@project, @tag.name), class: 'btn controls-item has-tooltip', title: s_('TagsPage|Browse commits') do
+      = icon('history')
+    .btn-container.controls-item
+      = render 'projects/buttons/download', project: @project, ref: @tag.name
+    - if can?(current_user, :admin_tag, @project)
+      .btn-container.controls-item-full
+        = link_to project_tag_path(@project, @tag.name), class: "btn btn-remove remove-row has-tooltip #{protected_tag?(@project, @tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), method: :delete, data: { confirm: s_('TagsPage|Deleting the %{tag_name} tag cannot be undone. Are you sure?') % { tag_name: @tag.name } } do
+          %i.fa.fa-trash-o
 
-    - if @tag.message.present?
-      %pre.wrap
-        = strip_gpg_signature(@tag.message)
+  - if @tag.message.present?
+    %pre.wrap
+      = strip_gpg_signature(@tag.message)
 
-  .append-bottom-default.prepend-top-default
-    - if @release.description.present?
-      .description.md
-        = markdown_field(@release, :description)
-    - else
-      = s_('TagsPage|This tag has no release notes.')
+.append-bottom-default.prepend-top-default
+  - if @release.description.present?
+    .description.md
+      = markdown_field(@release, :description)
+  - else
+    = s_('TagsPage|This tag has no release notes.')

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

-- @no_container = true
 - breadcrumb_title _("Repository")
 - @content_class = "limit-container-width" unless fluid_layout
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit)
@@ -9,6 +8,5 @@
 
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
-%div{ class: [(container_class), ("limit-container-width" unless fluid_layout)] }
-  = render 'projects/last_push'
-  = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
+= render 'projects/last_push'
+= render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)

app/views/projects/wikis/pages.html.haml

-- @no_container = true
 - add_to_breadcrumbs "Wiki", project_wiki_path(@project, :home)
 - breadcrumb_title s_("Wiki|Pages")
 - page_title s_("Wiki|Pages"), _("Wiki")
 - sort_title = wiki_sort_title(params[:sort])
 
-%div{ class: container_class }
-  .wiki-page-header.top-area.flex-column.flex-lg-row
+.wiki-page-header.top-area.flex-column.flex-lg-row
 
-    .nav-text.flex-fill
-      %h2.wiki-page-title
-        = s_("Wiki|Wiki Pages")
+  .nav-text.flex-fill
+    %h2.wiki-page-title
+      = s_("Wiki|Wiki Pages")
 
-    .nav-controls.pb-md-3.pb-lg-0
-      = link_to project_wikis_git_access_path(@project), class: 'btn' do
-        = icon('cloud-download')
-        = _("Clone repository")
+  .nav-controls.pb-md-3.pb-lg-0
+    = link_to project_wikis_git_access_path(@project), class: 'btn' do
+      = icon('cloud-download')
+      = _("Clone repository")
 
-      .dropdown.inline.wiki-sort-dropdown
+    .dropdown.inline.wiki-sort-dropdown
+      .btn-group{ role: 'group' }
         .btn-group{ role: 'group' }
-          .btn-group{ role: 'group' }
-            %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
-              = sort_title
-              = icon('chevron-down')
-            %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-              %li
-                = sortable_item(s_("Wiki|Title"), project_wikis_pages_path(@project, sort: ProjectWiki::TITLE_ORDER), sort_title)
-                = sortable_item(s_("Wiki|Created date"), project_wikis_pages_path(@project, sort: ProjectWiki::CREATED_AT_ORDER), sort_title)
-          = wiki_sort_controls(@project, params[:sort], params[:direction])
+          %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
+            = sort_title
+            = icon('chevron-down')
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+            %li
+              = sortable_item(s_("Wiki|Title"), project_wikis_pages_path(@project, sort: ProjectWiki::TITLE_ORDER), sort_title)
+              = sortable_item(s_("Wiki|Created date"), project_wikis_pages_path(@project, sort: ProjectWiki::CREATED_AT_ORDER), sort_title)
+        = wiki_sort_controls(@project, params[:sort], params[:direction])
 
-  %ul.wiki-pages-list.content-list
-    = render @wiki_entries, context: 'pages'
+%ul.wiki-pages-list.content-list
+  = render @wiki_entries, context: 'pages'
 
-  = paginate @wiki_pages, theme: 'gitlab'
+= paginate @wiki_pages, theme: 'gitlab'

app/views/users/show.html.haml

 - @hide_top_links = true
 - @hide_breadcrumbs = true
+- @no_container = true
 - page_title       @user.name
 - page_description @user.bio
 - header_title     @user.name, user_path(@user)
-- @no_container = true
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")

changelogs/unreleased/36765-flash-notification.yml

+---
+title: Make flash notifications sticky
+merge_request: 30141
+author:
+type: changed

spec/javascripts/flash_spec.js

@@ -25,14 +25,6 @@ describe('Flash', () => {
         '<script>alert("a");</script>',
       );
     });
-
-    it('adds container classes when inside content wrapper', () => {
-      el.innerHTML = createFlashEl('testing', 'alert', true);
-
-      expect(el.querySelector('.flash-text').classList.contains('container-fluid')).toBeTruthy();
-
-      expect(el.querySelector('.flash-text').classList.contains('container-limited')).toBeTruthy();
-    });
   });
 
   describe('hideFlash', () => {
@@ -171,9 +163,7 @@ describe('Flash', () => {
       it('adds container classes when inside content-wrapper', () => {
         flash('test');
 
-        expect(document.querySelector('.flash-text').className).toBe(
-          'flash-text container-fluid container-limited limit-container-width',
-        );
+        expect(document.querySelector('.flash-text').className).toBe('flash-text');
       });
 
       it('does not add container when outside of content-wrapper', () => {