Modal: Add small top padding to the content so that avoid cutting off…

… the visible outline when hovering items (WordPress#51829) * Site Editor: Fix focus cutoff in add template modal * Add padding-top to the modal content * Remove unnecessary padding-top * Remove unnecessary padding-top * Update changelog * Revert top padding from block patterns list * Revert top padding from block patterns list * Remove unnecessary changes * Remove unnecessary changes * Add CSS inline comment * Change padding metrics
pewresearch · Jul 13, 2023 · 4409649 · 4409649
1 parent 0ff1f3f
commit 4409649
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 13 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 -   `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
 -   `ConfirmDialog`: Ensure onConfirm isn't called an extra time when submitting one of the buttons using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
 -   `ZStack`: ZStack: fix component bounding box to match children ([#51836](https://github.com/WordPress/gutenberg/pull/51836)).
+-   `Modal`: Add small top padding to the content so that avoid cutting off the visible outline when hovering items ([#51829](https://github.com/WordPress/gutenberg/pull/51829)).
 
 ### Internal
 

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -72,7 +72,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: $grid-unit-30 $grid-unit-40 $grid-unit-15;
+	padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -130,7 +130,8 @@
 .components-modal__content {
 	flex: 1;
 	margin-top: $header-height + $grid-unit-15;
-	padding: 0 $grid-unit-40 $grid-unit-40;
+	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
+	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
 	&.hide-header {

diff --git a/packages/edit-post/src/components/start-page-options/style.scss b/packages/edit-post/src/components/start-page-options/style.scss
@@ -3,9 +3,6 @@
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
-	// Small top padding required to avoid cutting off the visible outline when hovering items
-	padding-top: $border-width-focus-fallback;
-
 	@include break-medium() {
 		column-count: 3;
 	}

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss
@@ -8,8 +8,3 @@
 		}
 	}
 }
-
-.sidebar-navigation__rename-modal-form {
-	// Fix for input focus style being cut off by the modal.
-	padding-top: 1px;
-}
diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
@@ -29,9 +29,6 @@ $actions-height: 92px;
 	column-count: 2;
 	column-gap: $grid-unit-30;
 
-	// Small top padding required to avoid cutting off the visible outline when hovering items
-	padding-top: $border-width-focus-fallback;
-
 	@include break-medium() {
 		column-count: 3;
 	}