diff --git a/components/popover/index.js b/components/popover/index.js
index 76efb3b7ec32b..f80026b2720c3 100644
--- a/components/popover/index.js
+++ b/components/popover/index.js
@@ -301,14 +301,16 @@ class Popover extends Component {
{ ...contentProps }
onKeyDown={ this.maybeClose }
>
+ { this.state.isMobile && (
+
+
+
+ ) }
- { this.state.isMobile &&
-
- }
{ children }
diff --git a/components/popover/style.scss b/components/popover/style.scss
index 3a24bd463d65f..48875747b4154 100644
--- a/components/popover/style.scss
+++ b/components/popover/style.scss
@@ -70,8 +70,9 @@
background: $white;
height: 100%;
- &:focus {
- box-shadow: $button-focus-style;
+ .components-popover.is-mobile & {
+ height: calc( 100% - #{ $panel-header-height } );
+ border-top: 0;
}
.components-popover:not(.is-mobile) & {
@@ -107,9 +108,17 @@
height: 100%;
}
+.components-popover__header {
+ height: $panel-header-height;
+ background: $light-gray-300;
+ padding: 0 $panel-padding;
+ border: 1px solid $light-gray-500;
+ position: relative;
+}
+
.components-popover__close.components-icon-button {
position: absolute;
- top: 0;
- right: 0;
+ top: 6px;
+ right: 6px;
z-index: z-index( '.components-popover__close' );
}
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
index de66da7db1a32..c25ed3af3fd32 100644
--- a/editor/assets/stylesheets/_variables.scss
+++ b/editor/assets/stylesheets/_variables.scss
@@ -53,7 +53,7 @@ $header-height: 56px;
$inserter-tabs-height: 36px;
$block-toolbar-height: 37px;
$sidebar-width: 280px;
-$sidebar-panel-header-height: 50px;
+$panel-header-height: 50px;
$admin-bar-height: 32px;
$admin-bar-height-big: 46px;
$admin-sidebar-width: 160px;
diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
index e9c3127023590..d0687ed5c441c 100644
--- a/editor/components/inserter/style.scss
+++ b/editor/components/inserter/style.scss
@@ -49,10 +49,6 @@ input[type="search"].editor-inserter__search {
&:focus {
@include input-style__focus-active;
}
-
- .components-popover.is-mobile & {
- padding-right: 30px;
- }
}
.editor-inserter__category-blocks {
diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
index 44c0ac2c009ea..ff6e98254cb3e 100644
--- a/editor/sidebar/style.scss
+++ b/editor/sidebar/style.scss
@@ -29,7 +29,7 @@
overflow: auto;
-webkit-overflow-scrolling: touch;
height: 100%;
- padding-top: $sidebar-panel-header-height;
+ padding-top: $panel-header-height;
margin-top: -1px;
margin-bottom: -1px;
@@ -46,7 +46,7 @@
top: 0;
left: 0;
right: 0;
- height: $sidebar-panel-header-height;
+ height: $panel-header-height;
@include break-small() {
position: inherit;