Merge pull request #70 from dknauss/fix/edit-mode-separator-band

fix(editor): collapse menu separators in edit mode (BUG-09 separator band)

Author: dknauss

assets/maestro.css

@@ -46,6 +46,22 @@ body.maestro-editing #collapse-menu {
 	display: none !important;
 }
 
+/* Core menu separators (a ~11px-tall li.wp-menu-separator + inner div.separator)
+ * read as a stray dark band between groups while editing — most visibly above
+ * the Posts group — because the force-expanded submenus already cluster each
+ * group, so the gap looks like extra dead space enlarging the next item.
+ * Collapse separators in edit mode (li AND the inner div). Separators are not
+ * editable in v1, so nothing is lost; !important beats WP core's per-version
+ * separator sizing across admin colour schemes. */
+.maestro-editing #adminmenu li.wp-menu-separator,
+.maestro-editing #adminmenu li.wp-menu-separator .separator {
+	height: 0 !important;
+	min-height: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	border: 0 !important;
+}
+
 /* ---------- accessibility utilities ------------------------------------- */
 
 /* Canonical WordPress .screen-reader-text implementation (clip-path variant).

readme.txt

@@ -129,6 +129,7 @@ If Maestro saves you time or brings you or your clients the joy of a tidy admin
 * Saved overrides now keep applying even when your site moves to a new host, when a plugin updates and changes a version number in its menu URL, when UTM tracking parameters drift on external-tool links, and when a taxonomy slug is stored with `&` encoding instead of `&` (or vice versa) — no manual re-save needed.
 * Edit-mode toolbar: the Exit and Reset All controls now use clearer, more consistent icons (Exit matches the admin-bar toggle).
 * Fix: the one-time first-run highlight on the first menu item is now reliably momentary — it no longer stays outlined for people who use the "reduce motion" accessibility setting.
+* Fix: while editing, the menu's group separators no longer show as a stray dark band between sections (most noticeable above the Posts group); they collapse so items sit flush. The normal menu is unchanged.
 
 = 1.2.0 =
 * Redesigned edit-mode toolbar: every control is now a compact icon button in one consistent system, with colour signalling meaning — green for editing/saved, amber for unsaved changes, red for Reset All. Fully accessible: each control keeps its name for screen readers and shows a tooltip on hover.

tests/e2e/separators.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Regression: WP core menu separators (li.wp-menu-separator + inner div.separator)
+ * must collapse to zero height in edit mode. With submenus force-expanded, the
+ * default ~11px separator gap reads as a stray dark band between groups (most
+ * visibly above the Posts group), making the next item look enlarged. They are
+ * not editable in v1, so they are collapsed while editing.
+ */
+test( 'menu separators collapse to zero height in edit mode', async ( { page } ) => {
+	await page.goto( '/wp-admin/index.php?maestro_edit=1', { waitUntil: 'networkidle' } );
+	await page.waitForSelector( '#adminmenu li.maestro-item' );
+
+	const heights = await page.evaluate( () =>
+		Array.from( document.querySelectorAll( '#adminmenu li.wp-menu-separator' ) ).map(
+			( li ) => Math.round( ( li as HTMLElement ).getBoundingClientRect().height )
+		)
+	);
+
+	expect( heights.length ).toBeGreaterThan( 0 ); // separators exist to test
+	for ( const h of heights ) {
+		expect( h ).toBe( 0 );
+	}
+} );