Adjust GlAlert action button margins

What does this MR do and why?

The layout of the action buttons container in the GlAlert component was changed in gitlab-ui. This is a followup to remove vertical margin from action buttons used in the GlAlert component, and remove horizontal margin when they are displayed in viewports smaller than the sm breakpoint.

Screenshots or screen recordings

Before	After

How to set up and validate locally

First, check out this branch.

Web IDE error

Apply this patch:

diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js
index 6dd734271bcb..3b3839d02b81 100644
--- a/app/assets/javascripts/ide/init_gitlab_web_ide.js
+++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js
@@ -61,7 +61,7 @@ export const initGitlabWebIDE = async (el) => {
 
   try {
     // See ClientOnlyConfig https://gitlab.com/gitlab-org/gitlab-web-ide/-/blob/main/packages/web-ide-types/src/config.ts#L17
-    await start(rootEl, {
+    await start(foo, {
       ...getBaseConfig(),
       nonce,
       httpHeaders,

Then try to open the web IDE. Adjust your viewport to be smaller than 576px wide.

Work item description edit

Apply this patch:

diff --git a/app/assets/javascripts/work_items/components/work_item_description.vue b/app/assets/javascripts/work_items/components/work_item_description.vue
index 933d791844f4..fa32ac24b359 100644
--- a/app/assets/javascripts/work_items/components/work_item_description.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description.vue
@@ -327,12 +327,7 @@ export default {
           @keydown.ctrl.enter="updateWorkItem"
         />
         <div class="gl-flex">
-          <gl-alert
-            v-if="hasConflicts"
-            :dismissible="false"
-            variant="danger"
-            class="gl-mt-5 gl-w-full"
-          >
+          <gl-alert :dismissible="false" variant="danger" class="gl-mt-5 gl-w-full">
             <p>
               {{
                 s__(
@@ -368,7 +363,7 @@ export default {
               </gl-button>
             </template>
           </gl-alert>
-          <div v-else-if="showButtonsBelowField" class="gl-mt-5">
+          <div v-if="showButtonsBelowField && false" class="gl-mt-5">
             <gl-button
               category="primary"
               variant="confirm"

Then edit a work item (task or epic). Adjust your viewport to be smaller than 576px wide.

Autodevops warning

Apply this patch:

diff --git a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
index 6c03caed5c8e..c7a195aca64e 100644
--- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
+++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
@@ -1,12 +1,11 @@
-- if show_auto_devops_implicitly_enabled_banner?(project, current_user)
-  = render Pajamas::AlertComponent.new(alert_options: { class: 'auto-devops-implicitly-enabled-banner' },
-    close_button_options: { class: 'hide-auto-devops-implicitly-enabled-banner',
-                            data: { project_id: project.id }}) do |c|
-    - c.with_body do
-      = s_("AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found.")
-      - unless Gitlab.config.registry.enabled
-        %div
-          = _('Container registry is not enabled on this GitLab instance. Ask an administrator to enable it in order for Auto DevOps to work.')
-    - c.with_actions do
-      = link_button_to _('Settings'), project_settings_ci_cd_path(project), class: 'alert-link', variant: :confirm
-      = link_button_to _('More information'), help_page_path('topics/autodevops/index.md'), target: '_blank', class: 'alert-link sm:gl-ml-3'
+= render Pajamas::AlertComponent.new(alert_options: { class: 'auto-devops-implicitly-enabled-banner' },
+  close_button_options: { class: 'hide-auto-devops-implicitly-enabled-banner',
+                          data: { project_id: project.id }}) do |c|
+  - c.with_body do
+    = s_("AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found.")
+    - unless Gitlab.config.registry.enabled
+      %div
+        = _('Container registry is not enabled on this GitLab instance. Ask an administrator to enable it in order for Auto DevOps to work.')
+  - c.with_actions do
+    = link_button_to _('Settings'), project_settings_ci_cd_path(project), class: 'alert-link', variant: :confirm
+    = link_button_to _('More information'), help_page_path('topics/autodevops/index.md'), target: '_blank', class: 'alert-link sm:gl-ml-3'

Then visit a project homepage. Adjust your viewport to be smaller than 576px wide.

project limit warning

Apply this patch:

diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index 019f09cd4e0b..442e276cc7ef 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -1,6 +1,4 @@
-- if params[:personal]
-  = content_for :flash_message do
-    = render 'shared/project_limit'
+= render 'shared/project_limit'
 
 = render ::Layouts::PageHeadingComponent.new(_('Projects')) do |c|
   - c.with_actions do
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index a4c5f7f9c527..ec7bc3092cc1 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,9 +1,8 @@
-- if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
-  = render Pajamas::AlertComponent.new(variant: :warning,
-    dismissible: false,
-    alert_options: { class: 'project-limit-message' }) do |c|
-    - c.with_body do
-      = _("You cannot create new projects in your personal namespace because you have reached your personal project limit.")
-    - c.with_actions do
-      = link_button_to _('Remind later'), '#', class: 'alert-link hide-project-limit-message', variant: :confirm
-      = link_button_to _("Don't show again"), user_settings_profile_path(user: {hide_project_limit: true}), method: :put, class: 'alert-link sm:gl-ml-3'
+= render Pajamas::AlertComponent.new(variant: :warning,
+  dismissible: false,
+  alert_options: { class: 'project-limit-message' }) do |c|
+  - c.with_body do
+    = _("You cannot create new projects in your personal namespace because you have reached your personal project limit.")
+  - c.with_actions do
+    = link_button_to _('Remind later'), '#', class: 'alert-link hide-project-limit-message', variant: :confirm
+    = link_button_to _("Don't show again"), user_settings_profile_path(user: {hide_project_limit: true}), method: :put, class: 'alert-link sm:gl-ml-3'

Then visit your user projects dashboard. Adjust your viewport to be smaller than 576px wide.

Related to #496658 (closed)