[icon] Fix SoftContextMenu alignment regression

The CL https://crrev.com/c/4422328 changed the icon implementation
in the SoftContextMenu to <devtools-icon>. This broke alignment when
the menu item text was long enough to cause the menu to grow.

The root cause is that <devtools-icon> when hidden, reports a width
of 0, throwing off the size calculations. This CL fixes this by
setting `min-width` on the hidden checkmark icon.

[email protected]

Bug: 1427397
Change-Id: I785494e775bf5a8b2679ab1092dae682dafb4178
Fixed: 1434260
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4445937
Commit-Queue: Simon Zünd <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: szuend

front_end/ui/legacy/SoftContextMenu.ts

@@ -219,6 +219,8 @@ export class SoftContextMenu {
     const checkMarkElement = new IconButton.Icon.Icon();
     checkMarkElement.data = {iconName: 'checkmark', color: 'var(--icon-default)', width: '14px', height: '14px'};
     checkMarkElement.classList.add('checkmark');
+    checkMarkElement.style.minWidth =
+        '14px';  // <devtools-icon> collapses to 0 width otherwise, throwing off alignment.
     menuItemElement.appendChild(checkMarkElement);
     if (!item.checked) {
       checkMarkElement.style.opacity = '0';
@@ -301,6 +303,8 @@ export class SoftContextMenu {
     checkMarkElement.data = {iconName: 'checkmark', color: 'var(--icon-default)', width: '14px', height: '14px'};
     checkMarkElement.classList.add('checkmark', 'soft-context-menu-item-checkmark');
     menuItemElement.appendChild(checkMarkElement);
+    checkMarkElement.style.minWidth =
+        '14px';  // <devtools-icon> collapses to 0 width otherwise, throwing off alignment.
     checkMarkElement.style.opacity = '0';
 
     createTextChild(menuItemElement, item.label || '');