diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js index 42a5a639e6e671..c0bb3f02733a5a 100644 --- a/packages/components/src/navigator/stories/index.js +++ b/packages/components/src/navigator/stories/index.js @@ -20,21 +20,29 @@ function NavigatorButton( { path, isBack = false, ...props } ) { } const MyNavigation = () => ( - - -

This is the home screen.

- - Navigate to child screen. - -
+
+ + +

This is the home screen.

+ + Navigate to child screen. + +
- -

This is the child screen.

- - Go back - -
-
+ +

This is the child screen.

+ + Go back + +
+ + +
); export const _default = () => { diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 383b9604013ff0..838d241c4495ae 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -325,10 +325,10 @@ export default function PreferencesModal() { ); } else { modalContent = ( - - - - + + + + { tabs.map( ( tab ) => { return ( @@ -358,13 +358,17 @@ export default function PreferencesModal() { ); } ) } - - { sections.map( ( section ) => { - return ( - + + +
+ { sections.map( ( section ) => { + return ( + + +

{ section.tabLabel }

{ section.content } -
- ); - } ) } - - - + + + + ); + } ) } + ); } return ( diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss index 2fbae2cbfa263c..2c6d35fc1bc6ce 100644 --- a/packages/edit-post/src/components/preferences-modal/style.scss +++ b/packages/edit-post/src/components/preferences-modal/style.scss @@ -14,10 +14,12 @@ $vertical-tabs-width: 160px; height: 70%; } - // Clears spacing to flush fit the navigation component to the modal edges. + // Clears spacing to flush fit the navigator component to the modal edges. @media (max-width: #{ ($break-medium - 1) }) { .components-modal__content { padding: 0; + // Prevents horizontal overflow from showing scrollbars. + overflow-x: hidden; &::before { content: none; @@ -25,46 +27,6 @@ $vertical-tabs-width: 160px; } } - .components-navigation { - padding: 0; - max-height: 100%; - overflow-y: auto; - color: $black; - - > * { - // Matches spacing cleared from the modal content element. - padding: $grid-unit-30 $grid-unit-40; - } - - .components-navigation__menu { - margin: 0; - - .components-navigation__item { - & > button { - padding: 3px $grid-unit-20; - height: $grid-unit-60; - // Aligns button text instead of button box. - margin: 0 #{-$grid-unit-20}; - width: calc(#{$grid-unit-40} + 100%); - &:focus { - font-weight: 500; - } - } - } - .components-navigation__menu-title-heading { - border-bottom: 1px solid $gray-300; - padding-left: 0; - padding-right: 0; - } - .components-navigation__back-button { - padding-left: 0; - } - .edit-post-preferences-modal__custom-fields-confirmation-button { - width: auto; - } - } - } - .edit-post-preferences__tabs { .components-tab-panel__tabs { position: absolute; diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index b74ba0b9370276..0dddc6d4a2ccff 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -17,6 +17,12 @@ } } +.edit-site-global-styles-sidebar { + > .components-panel { + overflow-x: hidden; + } +} + .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { margin-left: 0; }