Fix clipped focus rings in work item sidebar

The clipped focus rings in the work item sidebar are caused by
scroll overflow. We add padding to fix this

app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue

@@ -164,7 +164,7 @@ export default {
         data-testid="edit-button"
         category="tertiary"
         size="small"
-        class="gl-ml-auto gl-mr-2"
+        class="gl-ml-auto"
         :disabled="updateInProgress"
         @click="isEditing = true"
         >{{ $options.i18n.editButtonLabel }}</gl-button
@@ -177,7 +177,6 @@ export default {
           data-testid="apply-button"
           category="tertiary"
           size="small"
-          class="gl-mr-2"
           :disabled="updateInProgress"
           @click="isEditing = false"
           >{{ $options.i18n.applyButtonLabel }}</gl-button

app/assets/javascripts/work_items/components/work_item_due_date_with_edit.vue

@@ -219,7 +219,7 @@ export default {
         data-testid="edit-button"
         category="tertiary"
         size="small"
-        class="gl-ml-auto gl-mr-2"
+        class="gl-ml-auto"
         :disabled="isUpdating"
         @click="expandWidget"
         >{{ __('Edit') }}</gl-button
@@ -234,7 +234,6 @@ export default {
           data-testid="apply-button"
           category="tertiary"
           size="small"
-          class="gl-mr-2"
           :disabled="isUpdating"
           @click="collapseWidget"
           >{{ __('Apply') }}</gl-button

app/assets/javascripts/work_items/components/work_item_parent_with_edit.vue

@@ -224,7 +224,7 @@ export default {
         data-testid="edit-parent"
         category="tertiary"
         size="small"
-        class="gl-ml-auto gl-mr-2"
+        class="gl-ml-auto"
         :disabled="updateInProgress"
         @click="isEditing = true"
         >{{ __('Edit') }}</gl-button
@@ -237,7 +237,6 @@ export default {
           data-testid="apply-parent"
           category="tertiary"
           size="small"
-          class="gl-mr-2"
           :disabled="updateInProgress"
           @click="isEditing = false"
           >{{ __('Apply') }}</gl-button

app/assets/stylesheets/page_bundles/work_items.scss

@@ -177,6 +177,7 @@ $work-item-overview-gap-width: 2rem;
       top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height});
       height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height});
       margin-bottom: calc(#{$content-wrapper-padding} * -1);
+      padding-inline: 0.5rem;
       position: sticky;
       overflow-y: auto;
       overflow-x: hidden;

ee/app/assets/javascripts/work_items/components/work_item_health_status_with_edit.vue

@@ -139,7 +139,7 @@ export default {
         data-testid="edit-health-status"
         category="tertiary"
         size="small"
-        class="gl-ml-auto gl-mr-2"
+        class="gl-ml-auto"
         :disabled="updateInProgress"
         @click="isEditing = true"
         >{{ __('Edit') }}</gl-button

ee/app/assets/javascripts/work_items/components/work_item_weight_with_edit.vue

@@ -140,7 +140,6 @@ export default {
         data-testid="edit-weight"
         category="tertiary"
         size="small"
-        class="gl-mr-2"
         @click="isEditing = true"
         >{{ __('Edit') }}</gl-button
       >