diff --git a/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx b/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx index e6d99a9db3b..44b53fab043 100644 --- a/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx +++ b/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { Stack } from '../Stack'; +import { TextInput } from '../TextInput'; import { MultiSelect } from './MultiSelect'; export default { title: 'MultiSelect' }; @@ -27,3 +29,22 @@ export function EmptyGroup() { /> ); } + +export function SizeXSLineHeight() { + return ( + + + + + + ); +} diff --git a/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts b/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts index 9117c0c0151..195405e634d 100644 --- a/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts +++ b/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts @@ -17,8 +17,6 @@ export default createStyles((theme, { size, invalid }: MultiSelectStylesParams) alignItems: 'center', flexWrap: 'wrap', marginLeft: -theme.spacing.xs / 2, - paddingTop: theme.spacing.xs / 2 - 2, - paddingBottom: theme.spacing.xs / 2 - 2, boxSizing: 'border-box', }, @@ -27,6 +25,7 @@ export default createStyles((theme, { size, invalid }: MultiSelectStylesParams) }, searchInput: { + ...theme.fn.fontStyles(), flex: 1, minWidth: 60, backgroundColor: 'transparent', @@ -34,9 +33,10 @@ export default createStyles((theme, { size, invalid }: MultiSelectStylesParams) outline: 0, fontSize: theme.fn.size({ size, sizes: theme.fontSizes }), padding: 0, - margin: theme.spacing.xs / 2, + marginLeft: theme.spacing.xs / 2, appearance: 'none', color: 'inherit', + lineHeight: `${theme.fn.size({ size, sizes: INPUT_SIZES }) - 2}px`, '&::placeholder': { opacity: 1,