diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index 44b6824b184860..014f2820cea182 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -12,6 +12,7 @@ $z-layers: ( ".editor-block-list__layout .reusable-block-indicator": 1, ".editor-block-list__breadcrumb": 2, ".components-form-toggle__input": 1, + ".components-panel__header.edit-post-sidebar__panel-tabs": 1, ".editor-inserter__tabs": 1, ".editor-inserter__tab.is-active": 1, ".components-panel__header": 1, diff --git a/edit-post/components/sidebar/settings-header/style.scss b/edit-post/components/sidebar/settings-header/style.scss index 26743592f71a1e..fca16046d496b5 100644 --- a/edit-post/components/sidebar/settings-header/style.scss +++ b/edit-post/components/sidebar/settings-header/style.scss @@ -3,6 +3,10 @@ padding-left: 0; padding-right: $grid-size-small; border-top: 0; + background: $light-gray-200; + position: sticky; + z-index: z-index(".components-panel__header.edit-post-sidebar__panel-tabs"); + top: 0; } .edit-post-sidebar__panel-tab { @@ -10,7 +14,7 @@ border: none; border-radius: 0; cursor: pointer; - height: 50px; + height: $grid-size * 6; padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode margin-left: 0; font-weight: 400; diff --git a/edit-post/components/sidebar/style.scss b/edit-post/components/sidebar/style.scss index eda49ffb3d1ade..c33aee329d7065 100644 --- a/edit-post/components/sidebar/style.scss +++ b/edit-post/components/sidebar/style.scss @@ -6,7 +6,7 @@ bottom: 0; width: $sidebar-width; border-left: $border-width solid $light-gray-500; - background: $light-gray-300; + background: $white; color: $dark-gray-500; height: 100vh; overflow: hidden; diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index c1eecd4dc0fc3a..21b3ab0da33df2 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -38,7 +38,6 @@ display: flex; justify-content: space-between; align-items: center; - background: $light-gray-300; padding: 0 $panel-padding; height: 50px; border-top: $border-width solid $light-gray-500;