Merge branch '64066-fix-uneven-click-areas' into 'master'

Fix uneven click areas in toast actions

Closes #64066

See merge request gitlab-org/gitlab-ce!30345

app/assets/stylesheets/components/toast.scss

@@ -15,11 +15,15 @@
   .toasted.gl-toast {
     border-radius: $border-radius-default;
     font-size: $gl-font-size;
-    padding: $gl-padding-8 $gl-padding-24;
+    padding: $gl-padding-8 $gl-padding $gl-padding-8 $gl-padding-24;
     margin-top: $toast-default-margin;
     line-height: $gl-line-height;
     background-color: rgba($gray-900, $toast-background-opacity);
 
+    span {
+      padding-right: $gl-padding-8;
+    }
+
     @include media-breakpoint-down(xs) {
       .action:first-of-type {
         // Ensures actions buttons are right aligned on mobile
@@ -29,19 +33,14 @@
 
     .action {
       color: $blue-300;
-      margin: 0 0 0 $toast-action-margin-left;
+      margin: 0 0 0 $toast-default-margin;
       text-transform: none;
       font-size: $gl-font-size;
-
-      &:first-of-type {
-        padding-right: 0;
-      }
     }
 
     .toast-close {
       font-size: $default-icon-size;
       margin-left: $toast-default-margin;
-      padding-left: $gl-padding;
     }
   }
 }

app/assets/stylesheets/framework/variables.scss

@@ -507,7 +507,6 @@ $toast-height: 48px;
 $toast-max-width: 586px;
 $toast-padding-right: 42px;
 $toast-default-margin: 8px;
-$toast-action-margin-left: 16px;
 $toast-background-opacity: 0.95;
 
 /*

changelogs/unreleased/64066-fix-uneven-click-areas.yml

+---
+title: Fix spacing issues for toasts
+merge_request: 30345
+author:
+type: fixed