From e00ac51e36ce35982ab012e266506944614e8eb8 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Fri, 9 Feb 2024 18:04:38 +0000
Subject: [PATCH] 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
---
.../shared/work_item_sidebar_dropdown_widget_with_edit.vue | 3 +--
.../work_items/components/work_item_due_date_with_edit.vue | 3 +--
.../work_items/components/work_item_parent_with_edit.vue | 3 +--
app/assets/stylesheets/page_bundles/work_items.scss | 1 +
.../components/work_item_health_status_with_edit.vue | 2 +-
.../work_items/components/work_item_weight_with_edit.vue | 1 -
6 files changed, 5 insertions(+), 8 deletions(-)
diff --git a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue b/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue
index 1fd0f05643152..1d93af8c138ba 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue
+++ b/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
diff --git a/app/assets/javascripts/work_items/components/work_item_due_date_with_edit.vue b/app/assets/javascripts/work_items/components/work_item_due_date_with_edit.vue
index 9ad53a5b3794e..ac5091555260f 100644
--- a/app/assets/javascripts/work_items/components/work_item_due_date_with_edit.vue
+++ b/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
diff --git a/app/assets/javascripts/work_items/components/work_item_parent_with_edit.vue b/app/assets/javascripts/work_items/components/work_item_parent_with_edit.vue
index 9864e87736e79..9fb7a2c018a34 100644
--- a/app/assets/javascripts/work_items/components/work_item_parent_with_edit.vue
+++ b/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
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index c536d65f1fa7a..172ea7ee61f01 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/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;
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_health_status_with_edit.vue b/ee/app/assets/javascripts/work_items/components/work_item_health_status_with_edit.vue
index b46a93be1a014..2618ef2c78963 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_health_status_with_edit.vue
+++ b/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
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_weight_with_edit.vue b/ee/app/assets/javascripts/work_items/components/work_item_weight_with_edit.vue
index 795db8c4b9862..3afedea7b5c4d 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_weight_with_edit.vue
+++ b/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
>
--
GitLab