Change width and position for devtools-menu item highlight

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

Author: Kateryna Prokopenko

front_end/ui/components/menus/menuItem.css

@@ -52,11 +52,11 @@
 :host(:focus-visible:not(.prevents-close)) .menu-item::after {
   content: "";
   height: 100%;
-  width: 100%;
+  width: calc(100% + 2* var(--sys-size-8));
   border-radius: inherit;
   position: absolute;
   top: 0;
-  left: 0;
+  left: calc(-1 * var(--sys-size-8));
   background-color: var(--sys-color-state-hover-on-subtle);
 }