Fix grey background when menu collapsed #38941
Conversation
github-actions
bot
added
focus: react admin [team:Ghidorah]
plugin: woocommerce
Test Results SummaryCommit SHA: 3d79670
To view the full API test report, click here. To view the full E2E test report, click here. To view all test reports, visit the WooCommerce Test Reports Dashboard. |
|
Hi @louwie17, Apart from reviewing the code changes, please make sure to review the testing instructions as well. You can follow this guide to find out what good testing instructions should look like: |
louwie17
left a comment
louwie17
left a comment
There was a problem hiding this comment.
Left one suggestion on making use of the folded body class and also noticed one bug with the feedback footer, that one might just need a width: 100% if the parent width is already correct:
| width: calc(100% - $admin-menu-width); | ||
| left: $admin-menu-width; | ||
| width: calc(100% - $admin-menu-width-collapsed); | ||
| left: $admin-menu-width-collapsed; |
There was a problem hiding this comment.
Instead of setting this to the default width and left could we make use of the folded class that gets added to the body tag when the menu is collapsed?
You might be able to do something within here like:
&.folded .interface-interface-skeleton__header, &.folded .interface-interface-skeleton__footer {
width: calc(100% - $admin-menu-width-collapsed);
left: $admin-menu-width-collapsed;
}
There was a problem hiding this comment.
Good call! I changed that in the commit 0937df1
|
Thank you @louwie17 for reviewing this PR. I just addressed the changes you suggested. |
louwie17
left a comment
louwie17
left a comment
There was a problem hiding this comment.
Thanks for addressing the suggestion, although your latest change with adding the additional wrapper for the footer css broke some other styling.
| width: calc(100% - 160px); | ||
| bottom: -1px; /* to hide the border when no visible children */ | ||
| z-index: 1001; /* on top of #wp-content-editor-tools */ | ||
| .woocommerce-admin-page__add-product { |
There was a problem hiding this comment.
Is there a reason you decided to wrap the entire footer css with woocommerce-admin-page__add-product?
This means it will break on any other WooCommerce related page, also this breaks on the edit product page.
I would say we should leave it as is and remove the wrapper again, unless you have a strong reason to do otherwise?
There was a problem hiding this comment.
Nice catch! I fixed this in the commit ee1e52c.
|
@octaedro also noticed another issue where if you navigate to WooCommerce > Home from the product edit page, probably related to this line: 
|
Submission Review Guidelines:
Changes proposed in this Pull Request:
Error 1 - When collapsing the WordPress menu, a grey box appears in the top left corner.
Error 2 - When navigating to the Inventory field, the same grey background is displayed at the bottom of the form.
Closes #38887.
How to test the changes in this Pull Request:
Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:
/wp-admin/admin.php?page=wc-settings&tab=advanced§ion=featuresand ensure thatNew product editoris enabled.Products > Add Newusing a window with a height shorter than the admin menu, and scroll down.Collapse menubutton located at the bottom of the admin bar.Inventorytab.