NavigatorProvider: Exclude size value from contain CSS rule #57498
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #57494
Related to #56909
What?
This PR excludes the
size
value by changing the value of thecontain
CSS property applied to theNavigatorProvider
component fromstrict
(equivalent tosize layout paint style
) tocontent
(equivalent tolayout paint style
).As a result, this PR solves the following three problems as far as I've researched.
The Preferences modal content does not display at all in the mobile viewport
Reported by #57494. The Preferences modal component uses the
NavigatorProvider
when it's a mobile viewport.Global style sidebar layout
Content of one story is not displayed in Storybook
When you access the URL below, nothing should be displayed.
https://wordpress.github.io/gutenberg/?path=/story/components-experimental-navigator--skip-focus
Why?
contain: strict
is equivalent tocontain: size layout paint style
. According to MDN, if a value containssize
, it appears to have a size of zero if no size is explicitly specified for that element.It's not a problem if the element has an explicit height or
flex-glow:1
etc., but if not, problems like those reported by #57494 will occur.How?
We can probably fix the problem by leaving it as
contain: strict
and adjusting the CSS that is causing the problem. However, I think we should change fromstrict
tocontent
to avoid such issues at the component level, to avoid impacting consumers and forcing them to set an explicit height. There may be a performance drop compared tostrict
, but I personally think this is acceptable.Testing Instructions
Please confirm that the three issues mentioned at the beginning of the explanation have been resolved.