Customizer Menus: menu items are cut off in IE8

[designsimply]

Steps to reproduce:

1. Install WP r32806 or later
2. Go to Appearance > Customizer > Menus using IE8

Result: formatting problems appear in IE8 for the menu items in the main panel and in the '+ Add Items' slide-out panel.

/hat tip ocean90 for the original report, notes, and images:

This issue belongs to all sections and is probably an issue with #31336

/hat tip afercia for:

IE 8 doesn't understand calc(), providing a % width or in pixels will fix the first issue in the first screenshot:

/wp-admin/css/customize-controls.css

#customize-theme-controls .accordion-section-content {
	margin: 0;
	position: absolute;
	left: 100%;
	top: 0;
	width: IE 8 width here; <--
	width: -webkit-calc(100% - 24px);
	width: calc(100% - 24px);
	padding: 12px;
}

About the second issue, looks like .menu-item-handle is inheriting from /wp-admin/css/nav-menus.css a 382px width not sure why IE 8 doesn't get the override in

.wp-customizer .menu-item-bar .menu-item-handle {
	max-width: 100%;

changing max-width in width fixes it.

Originally reported in ​https://github.com/voldemortensen/menu-customizer/issues/119

[afercia]

If the only reason for using calc() is to apply padding: 12px; to a 100% width, I'd recommend to simply use box-sizing: border-box instead of calc(). Screenshot with patch applied. Please test in all browsers :)

(notice the wrong position of the "quick delete" X, that would need a separate ticket)

[ocean90]

In 32821:

Customizer: Replace usage of calc() with box-sizing: border-box.

IE8 doesn't support calc().

props afercia.
see #31336.
fixes #32664.