Fix devtools-menu item highlight being cropped

Screenshot: https://imgur.com/a/pLzaAxX

Bug:none
Change-Id: I18e705b3fea7581c8d10164aad912f5e80e2b713
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6308804
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>

Author: Kateryna Prokopenko

front_end/ui/components/menus/menuItem.css

@@ -48,9 +48,16 @@
   opacity: 60%;
 }
 
-:host(:hover:not(.prevents-close)) .menu-item,
-:host(:focus-visible:not(.prevents-close)) .menu-item {
-  background: var(--sys-color-state-hover-on-subtle);
+:host(:hover:not(.prevents-close)) .menu-item::after,
+:host(:focus-visible:not(.prevents-close)) .menu-item::after {
+  content: "";
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--sys-color-state-hover-on-subtle);
 }
 
 :host(:focus) {