diff --git a/app/assets/stylesheets/components/toast.scss b/app/assets/stylesheets/components/toast.scss index acbd909d595..e27bf282247 100644 --- a/app/assets/stylesheets/components/toast.scss +++ b/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; } } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 406bcda418e..4521643ce08 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/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; /* diff --git a/changelogs/unreleased/64066-fix-uneven-click-areas.yml b/changelogs/unreleased/64066-fix-uneven-click-areas.yml new file mode 100644 index 00000000000..ce0572cad34 --- /dev/null +++ b/changelogs/unreleased/64066-fix-uneven-click-areas.yml @@ -0,0 +1,5 @@ +--- +title: Fix spacing issues for toasts +merge_request: 30345 +author: +type: fixed