Boot: Fix black area below content when sidebar is taller than page content by sandipmaurya2611 · Pull Request #76764 · WordPress/gutenberg

sandipmaurya2611 · 2026-03-23T14:22:34Z

…ontent

The .boot-layout--single-page selector (specificity 0,2,0) was setting height: calc(100vh - $admin-bar-height-big) for all viewports, but the desktop @include mixins.break-medium reset (specificity 0,1,0) could not override it. This locked content height to the viewport on desktop in single-page mode, creating a black gap below when scrolling.

Fix:

Add matching-specificity .boot-layout--single-page & overrides inside the break-medium blocks for stage/inspector and canvas to reset top and height to auto on desktop.
Change .boot-layout from height: 100% to min-height: 100% so the layout container can grow when content exceeds the viewport.

Closes #76478

What?

Closes

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Before	After

Use of AI Tools

…ontent The `.boot-layout--single-page` selector (specificity 0,2,0) was setting `height: calc(100vh - $admin-bar-height-big)` for all viewports, but the desktop `@include mixins.break-medium` reset (specificity 0,1,0) could not override it. This locked content height to the viewport on desktop in single-page mode, creating a black gap below when scrolling. Fix: - Add matching-specificity `.boot-layout--single-page &` overrides inside the `break-medium` blocks for stage/inspector and canvas to reset `top` and `height` to `auto` on desktop. - Change `.boot-layout` from `height: 100%` to `min-height: 100%` so the layout container can grow when content exceeds the viewport. Closes WordPress#76478

github-actions · 2026-03-23T14:22:48Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @sandipmaurya2611@gmail.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: sandipmaurya2611@gmail.com.

Co-authored-by: sandipmaurya2611 <sandipmaurya2611@git.wordpress.org>
Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-03-23T14:23:40Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @sandipmaurya2611! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

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

shimotmk · 2026-03-24T02:04:25Z

Thanks for working on this!
I've added some comments, so please take a look.

`top` has no effect when `position: static` is applied in break-medium blocks. `height: auto` is retained to override the mobile rule (`.boot-layout--single-page`, specificity 0,2,0) which sets `height: calc(100vh - $admin-bar-height-big)`. Without this override, the black gap persists on desktop.

shimotmk

Thanks for the help! I think that's good.

sandipmaurya2611 · 2026-03-25T07:24:19Z

@props-bot refresh

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

t-hamano

LGTM 👍

… page c… (#76764) * Boot: Fix black area below content when sidebar is taller than page content The `.boot-layout--single-page` selector (specificity 0,2,0) was setting `height: calc(100vh - $admin-bar-height-big)` for all viewports, but the desktop `@include mixins.break-medium` reset (specificity 0,1,0) could not override it. This locked content height to the viewport on desktop in single-page mode, creating a black gap below when scrolling. Fix: - Add matching-specificity `.boot-layout--single-page &` overrides inside the `break-medium` blocks for stage/inspector and canvas to reset `top` and `height` to `auto` on desktop. - Change `.boot-layout` from `height: 100%` to `min-height: 100%` so the layout container can grow when content exceeds the viewport. Closes #76478 * fix: remove redundant `top: auto` from single-page desktop styles `top` has no effect when `position: static` is applied in break-medium blocks. `height: auto` is retained to override the mobile rule (`.boot-layout--single-page`, specificity 0,2,0) which sets `height: calc(100vh - $admin-bar-height-big)`. Without this override, the black gap persists on desktop. * Fix: revert global min-height and scope layout fix to single-page mode --------- Unlinked contributors: sandipmaurya2611@gmail.com. Co-authored-by: sandipmaurya2611 <sandipmaurya2611@git.wordpress.org> Co-authored-by: shimotmk <shimotomoki@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

github-actions · 2026-03-27T12:31:00Z

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 2cf4831

… page c… (#76764) * Boot: Fix black area below content when sidebar is taller than page content The `.boot-layout--single-page` selector (specificity 0,2,0) was setting `height: calc(100vh - $admin-bar-height-big)` for all viewports, but the desktop `@include mixins.break-medium` reset (specificity 0,1,0) could not override it. This locked content height to the viewport on desktop in single-page mode, creating a black gap below when scrolling. Fix: - Add matching-specificity `.boot-layout--single-page &` overrides inside the `break-medium` blocks for stage/inspector and canvas to reset `top` and `height` to `auto` on desktop. - Change `.boot-layout` from `height: 100%` to `min-height: 100%` so the layout container can grow when content exceeds the viewport. Closes #76478 * fix: remove redundant `top: auto` from single-page desktop styles `top` has no effect when `position: static` is applied in break-medium blocks. `height: auto` is retained to override the mobile rule (`.boot-layout--single-page`, specificity 0,2,0) which sets `height: calc(100vh - $admin-bar-height-big)`. Without this override, the black gap persists on desktop. * Fix: revert global min-height and scope layout fix to single-page mode --------- Unlinked contributors: sandipmaurya2611@gmail.com. Co-authored-by: sandipmaurya2611 <sandipmaurya2611@git.wordpress.org> Co-authored-by: shimotmk <shimotomoki@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

This updates the pinned hash from the `gutenberg` from `0d133bf7e7437d65d68a06551f3d613a7d8e4361` to `e2970ba736edb99e08fb369d4fb0c378189468ee`. The following changes are included: - WordPress/gutenberg#76478 Boot: Fix black area below content when sidebar is taller than page c… (WordPress/gutenberg#76764) - Style Book: Fix missing styles for classic themes in stylebook route (WordPress/gutenberg#76843) - RTC: Fix stuck "Join" link in post list when lock expires (WordPress/gutenberg#76795) - Icon: Fix center alignment in the editor for classic themes (WordPress/gutenberg#76878) - RTC: Fix notes not syncing between collaborative editors (WordPress/gutenberg#76873) - Latest Comments: Fix v1 deprecated block missing supports (WordPress/gutenberg#76877) - Connectors: Add Akismet as a default connector (WordPress/gutenberg#76828) - Restore with compaction update (WordPress/gutenberg#76872) - Improve JSDoc for abilities API (WordPress/gutenberg#76824) - Connectors: Replace plugin.slug with plugin.file (WordPress/gutenberg#76909) - Block visibility badge: use canvas iframe for viewport detection (WordPress/gutenberg#76889) - Connectors: Update help text from 'reset' to 'manage' (WordPress/gutenberg#76963) - Connectors: Hide Akismet unless already installed (WordPress/gutenberg#76962) - Wrap sync update processing in try/catch (WordPress/gutenberg#76968) - Backport: Improve validation and permission checks for `WP_HTTP_Polling_Sync_Server` (WordPress/gutenberg#76987) - Connectors: account for mu-plugins when resolving plugin.file status (WordPress/gutenberg#76994) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/0d133bf7e7437d65d68a06551f3d613a7d8e4361…e2970ba736edb99e08fb369d4fb0c378189468ee. Log created with: git log --reverse --format="- %s" 0d133bf7e7437d65d68a06551f3d613a7d8e4361..e2970ba736edb99e08fb369d4fb0c378189468ee | sed 's|#$[0-9][0-9]*$|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62209 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned hash from the `gutenberg` from `0d133bf7e7437d65d68a06551f3d613a7d8e4361` to `e2970ba736edb99e08fb369d4fb0c378189468ee`. The following changes are included: - WordPress/gutenberg#76478 Boot: Fix black area below content when sidebar is taller than page c… (WordPress/gutenberg#76764) - Style Book: Fix missing styles for classic themes in stylebook route (WordPress/gutenberg#76843) - RTC: Fix stuck "Join" link in post list when lock expires (WordPress/gutenberg#76795) - Icon: Fix center alignment in the editor for classic themes (WordPress/gutenberg#76878) - RTC: Fix notes not syncing between collaborative editors (WordPress/gutenberg#76873) - Latest Comments: Fix v1 deprecated block missing supports (WordPress/gutenberg#76877) - Connectors: Add Akismet as a default connector (WordPress/gutenberg#76828) - Restore with compaction update (WordPress/gutenberg#76872) - Improve JSDoc for abilities API (WordPress/gutenberg#76824) - Connectors: Replace plugin.slug with plugin.file (WordPress/gutenberg#76909) - Block visibility badge: use canvas iframe for viewport detection (WordPress/gutenberg#76889) - Connectors: Update help text from 'reset' to 'manage' (WordPress/gutenberg#76963) - Connectors: Hide Akismet unless already installed (WordPress/gutenberg#76962) - Wrap sync update processing in try/catch (WordPress/gutenberg#76968) - Backport: Improve validation and permission checks for `WP_HTTP_Polling_Sync_Server` (WordPress/gutenberg#76987) - Connectors: account for mu-plugins when resolving plugin.file status (WordPress/gutenberg#76994) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/0d133bf7e7437d65d68a06551f3d613a7d8e4361…e2970ba736edb99e08fb369d4fb0c378189468ee. Log created with: git log --reverse --format="- %s" 0d133bf7e7437d65d68a06551f3d613a7d8e4361..e2970ba736edb99e08fb369d4fb0c378189468ee | sed 's|#$[0-9][0-9]*$|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@62209 git-svn-id: http://core.svn.wordpress.org/trunk@61489 1a063a9b-81f0-0310-95a4-ce76da25c4cd

This updates the pinned hash from the `gutenberg` from `0d133bf7e7437d65d68a06551f3d613a7d8e4361` to `e2970ba736edb99e08fb369d4fb0c378189468ee`. The following changes are included: - WordPress/gutenberg#76478 Boot: Fix black area below content when sidebar is taller than page c… (WordPress/gutenberg#76764) - Style Book: Fix missing styles for classic themes in stylebook route (WordPress/gutenberg#76843) - RTC: Fix stuck "Join" link in post list when lock expires (WordPress/gutenberg#76795) - Icon: Fix center alignment in the editor for classic themes (WordPress/gutenberg#76878) - RTC: Fix notes not syncing between collaborative editors (WordPress/gutenberg#76873) - Latest Comments: Fix v1 deprecated block missing supports (WordPress/gutenberg#76877) - Connectors: Add Akismet as a default connector (WordPress/gutenberg#76828) - Restore with compaction update (WordPress/gutenberg#76872) - Improve JSDoc for abilities API (WordPress/gutenberg#76824) - Connectors: Replace plugin.slug with plugin.file (WordPress/gutenberg#76909) - Block visibility badge: use canvas iframe for viewport detection (WordPress/gutenberg#76889) - Connectors: Update help text from 'reset' to 'manage' (WordPress/gutenberg#76963) - Connectors: Hide Akismet unless already installed (WordPress/gutenberg#76962) - Wrap sync update processing in try/catch (WordPress/gutenberg#76968) - Backport: Improve validation and permission checks for `WP_HTTP_Polling_Sync_Server` (WordPress/gutenberg#76987) - Connectors: account for mu-plugins when resolving plugin.file status (WordPress/gutenberg#76994) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/0d133bf7e7437d65d68a06551f3d613a7d8e4361…e2970ba736edb99e08fb369d4fb0c378189468ee. Log created with: git log --reverse --format="- %s" 0d133bf7e7437d65d68a06551f3d613a7d8e4361..e2970ba736edb99e08fb369d4fb0c378189468ee | sed 's|#$[0-9][0-9]*$|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/branches/7.0@62212 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned hash from the `gutenberg` from `0d133bf7e7437d65d68a06551f3d613a7d8e4361` to `e2970ba736edb99e08fb369d4fb0c378189468ee`. The following changes are included: - WordPress/gutenberg#76478 Boot: Fix black area below content when sidebar is taller than page c… (WordPress/gutenberg#76764) - Style Book: Fix missing styles for classic themes in stylebook route (WordPress/gutenberg#76843) - RTC: Fix stuck "Join" link in post list when lock expires (WordPress/gutenberg#76795) - Icon: Fix center alignment in the editor for classic themes (WordPress/gutenberg#76878) - RTC: Fix notes not syncing between collaborative editors (WordPress/gutenberg#76873) - Latest Comments: Fix v1 deprecated block missing supports (WordPress/gutenberg#76877) - Connectors: Add Akismet as a default connector (WordPress/gutenberg#76828) - Restore with compaction update (WordPress/gutenberg#76872) - Improve JSDoc for abilities API (WordPress/gutenberg#76824) - Connectors: Replace plugin.slug with plugin.file (WordPress/gutenberg#76909) - Block visibility badge: use canvas iframe for viewport detection (WordPress/gutenberg#76889) - Connectors: Update help text from 'reset' to 'manage' (WordPress/gutenberg#76963) - Connectors: Hide Akismet unless already installed (WordPress/gutenberg#76962) - Wrap sync update processing in try/catch (WordPress/gutenberg#76968) - Backport: Improve validation and permission checks for `WP_HTTP_Polling_Sync_Server` (WordPress/gutenberg#76987) - Connectors: account for mu-plugins when resolving plugin.file status (WordPress/gutenberg#76994) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/0d133bf7e7437d65d68a06551f3d613a7d8e4361…e2970ba736edb99e08fb369d4fb0c378189468ee. Log created with: git log --reverse --format="- %s" 0d133bf7e7437d65d68a06551f3d613a7d8e4361..e2970ba736edb99e08fb369d4fb0c378189468ee | sed 's|#$[0-9][0-9]*$|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/branches/7.0@62212 git-svn-id: http://core.svn.wordpress.org/branches/7.0@61492 1a063a9b-81f0-0310-95a4-ce76da25c4cd

… page c… (#76764) * Boot: Fix black area below content when sidebar is taller than page content The `.boot-layout--single-page` selector (specificity 0,2,0) was setting `height: calc(100vh - $admin-bar-height-big)` for all viewports, but the desktop `@include mixins.break-medium` reset (specificity 0,1,0) could not override it. This locked content height to the viewport on desktop in single-page mode, creating a black gap below when scrolling. Fix: - Add matching-specificity `.boot-layout--single-page &` overrides inside the `break-medium` blocks for stage/inspector and canvas to reset `top` and `height` to `auto` on desktop. - Change `.boot-layout` from `height: 100%` to `min-height: 100%` so the layout container can grow when content exceeds the viewport. Closes #76478 * fix: remove redundant `top: auto` from single-page desktop styles `top` has no effect when `position: static` is applied in break-medium blocks. `height: auto` is retained to override the mobile rule (`.boot-layout--single-page`, specificity 0,2,0) which sets `height: calc(100vh - $admin-bar-height-big)`. Without this override, the black gap persists on desktop. * Fix: revert global min-height and scope layout fix to single-page mode --------- Unlinked contributors: sandipmaurya2611@gmail.com. Co-authored-by: sandipmaurya2611 <sandipmaurya2611@git.wordpress.org> Co-authored-by: shimotmk <shimotomoki@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Mar 23, 2026

shimotmk added [Type] Bug An existing feature does not function as intended [Package] Boot /packages/boot Connectors screen Tracks connectors screen related tasks [Feature] Font Library labels Mar 24, 2026

shimotmk added this to WordPress 7.0 Editor Tasks Mar 24, 2026

github-project-automation bot moved this to 🔎 Needs Review in WordPress 7.0 Editor Tasks Mar 24, 2026

shimotmk added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 24, 2026

shimotmk requested a review from youknowriad March 24, 2026 01:51

shimotmk reviewed Mar 24, 2026

View reviewed changes

packages/boot/src/components/root/style.scss Show resolved Hide resolved

packages/boot/src/components/root/style.scss Show resolved Hide resolved

shimotmk requested a review from t-hamano March 24, 2026 02:08

shimotmk approved these changes Mar 25, 2026

View reviewed changes

t-hamano reviewed Mar 26, 2026

View reviewed changes

packages/boot/src/components/root/style.scss Outdated Show resolved Hide resolved

Fix: revert global min-height and scope layout fix to single-page mode

3cfd355

t-hamano approved these changes Mar 27, 2026

View reviewed changes

t-hamano merged commit bc937ae into WordPress:trunk Mar 27, 2026
40 checks passed

github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 7.0 Editor Tasks Mar 27, 2026

github-actions bot added this to the Gutenberg 22.9 milestone Mar 27, 2026

github-actions bot removed the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 27, 2026

github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 27, 2026

mcsf changed the title ~~#76478 Boot: Fix black area below content when sidebar is taller than page c…~~ Boot: Fix black area below content when sidebar is taller than page content Apr 1, 2026

jorgefilipecosta mentioned this pull request Apr 6, 2026

Build/Test Tools: Update Gutenberg packages WordPress/wordpress-develop#11454

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Boot: Fix black area below content when sidebar is taller than page content#76764

Boot: Fix black area below content when sidebar is taller than page content#76764
t-hamano merged 3 commits intoWordPress:trunkfrom
sandipmaurya2611:fix/76478-boot-black-area-below-content

sandipmaurya2611 commented Mar 23, 2026

Uh oh!

github-actions bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 23, 2026

Uh oh!

Uh oh!

Uh oh!

shimotmk commented Mar 24, 2026

Uh oh!

shimotmk left a comment

Uh oh!

sandipmaurya2611 commented Mar 25, 2026

Uh oh!

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

sandipmaurya2611 commented Mar 23, 2026

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Use of AI Tools

Uh oh!

github-actions bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

github-actions bot commented Mar 23, 2026

Uh oh!

Uh oh!

Uh oh!

shimotmk commented Mar 24, 2026

Uh oh!

shimotmk left a comment

Choose a reason for hiding this comment

Uh oh!

sandipmaurya2611 commented Mar 25, 2026

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Mar 23, 2026 •

edited

Loading