fix(Expiry): correct class placement and CSS specificity issue

This PR is based on #2914

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/demos.mdx

@@ -9,7 +9,11 @@ import * as Examples from './Examples'
 
 The locale is what determines the components `placeholder` format .e.g. `mm/åå` in norwegian, `mm/yy` in english.
 
-<ChangeLocale bottom label="Locale used in the demos:" showUS={true} />
+<ChangeLocale
+  bottom
+  label="Locale used in the demos:"
+  listUSLocale={true}
+/>
 
 English (US) is not included in Eufemia by default. You can include it like:
 

packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx

@@ -52,7 +52,7 @@ function Expiry(props: ExpiryProps) {
 
   return (
     <FieldBlock
-      className={classnames(className)}
+      className={classnames('dnb-forms-field-expiry', className)}
       labelSecondary={labelSecondary}
       labelDescription={labelDescription}
       info={info}
@@ -61,8 +61,8 @@ function Expiry(props: ExpiryProps) {
       {...pickSpacingProps(props)}
     >
       <MultiInputMask
+        stretch
         id={`${idRef}__input`}
-        className="dnb-forms-field-expiry"
         label={label}
         labelDirection={layout}
         values={expiry}

packages/dnb-eufemia/src/extensions/forms/Field/Expiry/style/dnb-expiry.scss

@@ -1,9 +1,11 @@
 @import '../../style/field-sizes.scss';
 
 .dnb-forms-field-expiry {
-  width: var(--forms-field-width--small);
+  .dnb-multi-input-mask {
+    width: var(--forms-field-width--small);
 
-  .dnb-input__shell {
-    justify-content: center;
+    .dnb-input__shell {
+      justify-content: center;
+    }
   }
 }