Skip to content

Commit 1f152ce

Browse files
youknowriadyouknowriad
authored
Boot: Fix mobile admin bar covering single-page mode headers (#75339)
When the Boot package is used in single-page mode within wp-admin, the fixed-positioned canvas and surfaces elements were not accounting for the mobile admin bar height (46px), causing them to extend behind the admin bar and cover page headers on mobile viewports.
1 parent 3a160e8 commit 1f152ce

1 file changed

Lines changed: 22 additions & 0 deletions

File tree

‎packages/boot/src/components/root/style.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@
4747
top: 0;
4848
left: 0;
4949
right: 0;
50+
51+
.boot-layout--single-page & {
52+
top: variables.$admin-bar-height-big;
53+
}
5054
z-index: 3;
5155
background: var(--wpds-color-bg-surface-neutral, #fff);
5256
padding: variables.$grid-unit-20;
@@ -96,6 +100,11 @@
96100
border-radius: 0;
97101
margin: 0;
98102

103+
.boot-layout--single-page & {
104+
top: variables.$admin-bar-height-big;
105+
height: calc(100vh - variables.$admin-bar-height-big);
106+
}
107+
99108
// Desktop: restore original styles
100109
@include mixins.break-medium {
101110
position: static;
@@ -143,6 +152,11 @@
143152
border-radius: 0;
144153
margin: 0;
145154

155+
.boot-layout--single-page & {
156+
top: variables.$admin-bar-height-big;
157+
height: calc(100vh - variables.$admin-bar-height-big);
158+
}
159+
146160
// Desktop: restore original styles
147161
@include mixins.break-medium {
148162
position: static;
@@ -190,4 +204,12 @@
190204
border: none;
191205
box-shadow: none;
192206
overflow: hidden;
207+
208+
.boot-layout--single-page & {
209+
top: variables.$admin-bar-height-big;
210+
211+
@include mixins.break-medium {
212+
top: variables.$admin-bar-height;
213+
}
214+
}
193215
}

0 commit comments

Comments
 (0)