[Wildcard]: Fix MultiCombobox Input UI (#57898)

Fix MultiCombobox Input UI

client/wildcard/src/components/Card/Card.module.scss

@@ -1,5 +1,5 @@
 // :where() is used to fix the CSS ordering issue with the Toast component
-// See https: //github.com/sourcegraph/sourcegraph/issues/42217
+// See https://github.com/sourcegraph/sourcegraph/issues/42217
 :where(.card) {
     --card-bg: var(--color-bg-1);
     --card-border-color: var(--border-color-2);

client/wildcard/src/components/Combobox/MultiCombobox.module.scss

@@ -57,12 +57,19 @@
     }
 }
 
-.input {
+// :root selector is needed here in order to override .form-control
+// global CSS class, since we don't have any control over CSS order files
+// we can't ensure wildcard styles prevalence over global css styles.
+// Therefore we have to increase cascade speciality synthetically.
+:root .input {
     border: none;
     outline: none;
     padding: 0 0 0 0.5rem;
-    box-shadow: none !important;
     height: 1.75rem;
+
+    &:focus-visible {
+        box-shadow: none;
+    }
 }
 
 .pill {

client/wildcard/src/components/Combobox/MultiCombobox.story.tsx

@@ -26,6 +26,12 @@ const decorator: Decorator = story => (
 const config: Meta = {
     title: 'wildcard/MultiCombobox',
     decorators: [decorator],
+    parameters: {
+        chromatic: {
+            enableDarkMode: true,
+            disableSnapshot: false,
+        },
+    },
 }
 
 export default config