Adjust label spacing to account for min target size
## Problem
The space between the remove (×) button in a label and the clickable label text is too small to satisfy the new WCAG success criteria. [Understanding SC 2.5.8: Target Size (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
From https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1844#note_1931586730:
> As I've been going through the UI, one component that stands out so far is the label, where the linked text and × (remove) button are close enough, and the target size for the button small enough that I believe this would fail. In the screenshot below, I've added the 24px target size circle, and it does overlap the linked text. It seems like a few more pixels between the button and text would get this to passing. FYI @seggenberger @sdejonge @cynthia
>
> {width="400px"}
## Solution
Increase the space between the remove button and the label text.
Proposal from @sdejonge:
> Agreed. This is is an interesting criteria, so the close button itself doesn't need to be `24px` is size, it can be `20px` within the height of `GlLabel` (we have `overflow: hidden`) and have a `4px` gap between the close button and the label text (interactive link when `target` provided).
>
> I had a quick play locally to see what this might look like:
>
> 
>
> 
>
> Some refinement is necessarily to ensure we provide proper spacing on all sides of the label with/without close button, also ensuring it is robust in email as well.
>
> Changes I applied, will need refinement:
```
diff --git a/src/components/base/label/label.scss b/src/components/base/label/label.scss
index e04b511ce..63cf8295e 100644
--- a/src/components/base/label/label.scss
+++ b/src/components/base/label/label.scss
@@ -52,10 +52,10 @@ $label-close-button: '.gl-label-close.gl-button';
> #{$label-close-button} {
@include gl-border-0;
@include gl-display-flex;
- width: px-to-rem(14px);
- height: px-to-rem(14px);
+ width: px-to-rem(20px);
+ height: px-to-rem(20px);
margin-left: #{-$gl-spacing-scale-1 - ($gl-spacing-scale-1 / 2)};
- margin-right: #{$gl-spacing-scale-2 - ($gl-spacing-scale-1 / 2)};
+ // margin-right: #{$gl-spacing-scale-2 - ($gl-spacing-scale-1 / 2)};
@include gl-p-0;
@include gl-rounded-full;
@include gl-shadow-none;
```
issue