Local NTP: fix most visited X padding

* Move X into middle of focus outline
* Fix incorrect padding around X (it should be 4px top/bottom, 2px left/right)

Screenshots: https://bugs.chromium.org/p/chromium/issues/detail?id=1036708#c6

Fixed: 1036708, 1001637
Change-Id: I9ab51b17487808d1891a98e446060a6375f6ac60
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1982720
Auto-Submit: Dan Beam <dbeam@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#727520}

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -253,11 +253,13 @@ body:not(.reordering) .md-menu:focus:not(.mouse-navigation) {
 
 /* We use ::after without content to provide the masked X element. */
 .md-menu::after {
-  --mask-width: calc(var(--md-menu-size) - 2);
+  --mask-gap: 1px;
+  --mask-width: calc(var(--md-menu-size) - 2 * var(--mask-gap));
   /* TODO(crbug.com/1012065): Use SVG for the "X" icon. */
   -webkit-mask-image: -webkit-image-set(
       url(chrome-search://most-visited/dont_show.png) 1x,
       url(chrome-search://most-visited/dont_show_2x.png) 2x);
+  -webkit-mask-position: var(--mask-gap);
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: var(--mask-width);
   background-color: rgb(var(--GG600-rgb));