Keep the indentation with multiline contents of Item in List

[7iomka]

What package has an issue

@mantine/core

Describe the bug

When content in List.Item is wrapping, it starts on start of a new line without the same space as mark has.

I think, this is because you use list-style-position: inside.

What version of @mantine/hooks page do you have in package.json?

latest

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

If this is a native list (no custom icon, etc..) for itemWrapper use styles

    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 1.5em);

or as for custom one use flex

    display: inline-flex;
    flex-direction: column;
    max-width: calc(100% - 1.5em);

1.5em is a value of a dot width plus default space between it and content of item.

Currently, there is no other way to fix this, except to make a custom implementation for the default list types

[7iomka]

Another simpler way to fix without any hack with maxWidth

item: {
    whiteSpace: 'nowrap',
},
itemWrapper: {
    display: 'inline-flex',
    whiteSpace: 'normal',
}

[rtivital]

Fixed in 5.5.0

[7iomka]

@rtivital Why you changed list-style-position: outside; ? Outside position ignore indentation at all, and make me crazy to align my lists. why didn't you just take my suggestion to fix the problem?

[rtivital]

I guess because that's how you've described an issue. I did not work on it and the PR seemed fine. If you want to fix it other way, feel free to submit a PR.

[7iomka]

@rtivital Done.