[@mantine/core] List: Fix incorrect indentation for nested list items (…

…#2606) * [@mantine/core] Fix indentation on List (listStylePosition: 'inside') * [@mantine/core] List - fix nested items
mantinedev · Oct 3, 2022 · 6c8a8b1 · 6c8a8b1
1 parent d8115fb
commit 6c8a8b1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/mantine-core/src/List/List.styles.ts b/src/mantine-core/src/List/List.styles.ts
@@ -15,6 +15,6 @@ export default createStyles((theme, { withPadding, size, listStyleType }: ListSt
     lineHeight: theme.lineHeight,
     margin: 0,
     paddingLeft: withPadding ? theme.spacing.xl : 0,
-    listStylePosition: 'outside',
+    listStylePosition: 'inside',
   },
 }));
diff --git a/src/mantine-core/src/List/ListItem/ListItem.styles.ts b/src/mantine-core/src/List/ListItem/ListItem.styles.ts
@@ -8,10 +8,13 @@ interface ListItemStyles {
 export default createStyles((theme, { spacing, center }: ListItemStyles, getRef) => ({
   itemWrapper: {
     ref: getRef('itemWrapper'),
-    display: 'inline',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    whiteSpace: 'normal',
   },
 
   item: {
+    whiteSpace: 'nowrap',
     lineHeight: center ? 1 : theme.lineHeight,
 
     '&:not(:first-of-type)': {