Tect/icon alignment issues on flyout menu

[tardinha]

In version 4.0.0, the alignment of the flyout menu, as well it's child items is a bit skew-whiff.

This is with recipe-cms 4.4.1

[nglasl]

That's interesting, I didn't see any issues with alignment or icons when I was playing around with the pull request. Perhaps I was on a slightly different SS version.

[flashbackzoo]

I can reproduce this with a vanilla CWP (2.3.2@stable) install

1. Create a new CWP project composer create-project cwp/cwp-installer my-project
2. Add silverstripe-grouped-cms-menu composer require symbiote/silverstripe-grouped-cms-menu
3. Add the basic config documented in this repos readme.

Also note on the right of the screen, under the search icon.

[adrian-stein]

I also have this issue on 4.4.4 SS and 4.0.0 grouped menus

[kinglozzer]

I also hit a bunch of styling issues. Here’s some CSS I threw together and include in the CMS to tidy things up (as a workaround, would need a lot of tidying up before a pull request 😅):

SilverStripe\Admin\LeftAndMain:
  extra_requirements_css:
    - 'app/css/cms.css'

/* app/css/cms.css */
.cms-menu__list .children > a > .text {
	margin-right: 34px;
}

.cms-menu__list li.children.current > a:hover,
.cms-menu__list li.children.opened a:hover {
	background-color: #d8e4eb;
}

.cms-menu__list .children a .toggle-children {
	position: absolute;
	top: 50%; right: 8px;
	width: 26px; height: 26px;
	border-radius: 2px;
	margin-top: -1px;
	padding-top: 0;
	font-size: 17px;
	text-align: center;
	line-height: 26px;
	transform: translateY(-50%);
}

.cms-menu__list .children a .toggle-children:hover {
	background: rgba(85, 137, 167, 0.15);
}

.cms-menu__list .children a .toggle-children:before {
	font-family: silverstripe!important;
	font-style: normal!important;
	font-weight: 400!important;
	font-variant: normal!important;
	text-transform: none!important;
	speak: none;
	line-height: 26px;
	-webkit-font-smoothing: antialiased;
	content: '(';
}

.cms-menu__list .children a .toggle-children.opened:before {
	content: '*';
}

.cms-menu__list li.children ul.collapsed-flyout {
	margin-top: -52px;
}

.cms-menu__list.collapsed .opened .child-flyout-indicator {
	display: none !important;
}

.cms-menu__list.collapsed .opened ul.collapsed-flyout li.clone {
	display: none !important;
}

.cms-menu__list.collapsed .opened ul.collapsed-flyout li a {
	padding-right: 8px;
	padding-left: 8px;
}

.cms-menu__list.collapsed .opened ul.collapsed-flyout li a .menu__icon {
	left: 13px;
}

.cms-menu__list.collapsed .opened ul.collapsed-flyout li a span.text {
	margin-left: 23px;
}

.cms-menu__list .child-flyout-indicator {
	display: none !important;
}