From 4ca78cdf8ec71ba62dbf4403662202872d8e5888 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Mon, 16 Sep 2024 19:35:24 +0900 Subject: [PATCH] Fix Tabs styling in Font Library modal (#65330) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: DaniGuardiola Co-authored-by: ciampo --- .../global-styles/font-library-modal/index.js | 52 +++++++++---------- .../font-library-modal/style.scss | 19 ++++--- 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js index 5af4be90fecdcf..495652f144275e 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js @@ -66,8 +66,8 @@ function FontLibraryModal( { isFullScreen className="font-library-modal" > -
- + +
{ tabs.map( ( { id, title } ) => ( @@ -75,30 +75,30 @@ function FontLibraryModal( { ) ) } - { tabs.map( ( { id } ) => { - let contents; - switch ( id ) { - case 'upload-fonts': - contents = ; - break; - case 'installed-fonts': - contents = ; - break; - default: - contents = ; - } - return ( - - { contents } - - ); - } ) } - -
+
+ { tabs.map( ( { id } ) => { + let contents; + switch ( id ) { + case 'upload-fonts': + contents = ; + break; + case 'installed-fonts': + contents = ; + break; + default: + contents = ; + } + return ( + + { contents } + + ); + } ) } + ); } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss index a9a0784cbcb5a1..8d6f8a3c9b0af3 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss +++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss @@ -129,18 +129,17 @@ $footer-height: 70px; padding-bottom: $grid-unit-20; } -.font-library-modal__tabs { - [role="tablist"] { - position: sticky; - top: 0; - border-bottom: 1px solid $gray-300; - background: $white; - margin: 0 #{$grid-unit-40 * -1}; - padding: 0 $grid-unit-20; - z-index: 1; - } +.font-library-modal__tablist { + position: sticky; + top: 0; + border-bottom: 1px solid $gray-300; + background: $white; + margin: 0 #{$grid-unit-40 * -1}; + padding: 0 $grid-unit-20; + z-index: 1; } + .font-library-modal__upload-area { align-items: center; display: flex;