List.Item overflows List

[edymusajev]

What package has an issue

@mantine/core

Describe the bug

The itemWrapper div inside of List.Item overflows the width of the List.

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

5.6.1

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

https://codesandbox.io/s/relaxed-matan-upqijw

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

Yes

Possible fix

No response

[koralarts]

Did a little research about why this is happening. From what I researched, list-style-position: inside is handled differently by different browsers according to (MDN). After checking different browsers (Chrome, Safari, Firefox, and Edge) they seem to act the same.

Quick Solution

A quick solution is to pass a custom bullet icon.

<List icon="•"> ... </List>

---

Caveat(s)

The ::marker element is controlled by having an element have display: list-item.

Possible Solutions

1. Calculate the width of the item wrapper to take into account the bullet. This by default isn't a good solution since sizing won't be consistent between browsers.
2. Use a custom bullet. This can be done in multiple ways -- via CSS or custom element.

2.1 CSS

A custom bullet can be created using a ::before element. I used display: list-item instead of passing a bullet in content because it will render the bullet using the browser's preferred bullet.

li {
  display: flex;
  
  &::before {
    content: ' ';
    display: list-item;
  }
}

https://codesandbox.io/s/mantine-list-item-overflow-4n19br?file=/src/App.tsx

2.2 Custom Element

A custom element rendering a bullet could be the default element rendered if icon is not passed.

---

I think either solution would be the least invasive as both won't require breaking structural changes. If we feel one is a viable solution, I can make a PR with the selected solution; otherwise, we'll brainstorm another solution.

[Manas-Nagelia]

A more straightforward solution is to add tags inside the <List.Item> tag. This is because this commit with removed the original tags causing this overflow to happen: #2146

[4m1n83]

@koralarts you are right!
Here is a codepen that shows the error: https://codepen.io/aminbe/pen/dygmoge
There is no perfect solution for this one ...
I propose removing the listStylePosition: 'inside', and then adjust padding:

  (theme, { withPadding, listStyleType }: ListStylesParams, { size }) => ({
    root: {
      ...theme.fn.fontStyles(),
      listStyleType,
      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
      fontSize: getSize({ size, sizes: theme.fontSizes }),
      lineHeight: theme.lineHeight,
      margin: 0,
      paddingLeft: withPadding ? rem(40) : theme.spacing.sm,
    },
  })
);```

What do you think?

What do you think?

[Manas-Nagelia]

@koralarts you are right! Here is a codepen that shows the error: https://codepen.io/aminbe/pen/dygmoge There is no perfect solution for this one ... I propose removing the listStylePosition: 'inside', and then adjust padding:

  (theme, { withPadding, listStyleType }: ListStylesParams, { size }) => ({
    root: {
      ...theme.fn.fontStyles(),
      listStyleType,
      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
      fontSize: getSize({ size, sizes: theme.fontSizes }),
      lineHeight: theme.lineHeight,
      margin: 0,
      paddingLeft: withPadding ? rem(40) : theme.spacing.sm,
    },
  })
);```

What do you think?

What do you think?

I made a Pull Request and it got merged, so the issue should be fixed.

[Manas-Nagelia]

#2857 There's the link to the Pull Request that got merged.