[Bug]: Numbered Lists are cut off (Tested on iPad and mobile)

[swiftdev29]

What happened?

For numbers >9 the first digit is cut off, while rendering.

Steps to Reproduce

1. Ask any model to give a numbered list. For demonstration, ask it to start the list from 25.

What browsers are you seeing the problem on?

Safari, Mobile (iOS), Mobile (Android)

Relevant log output

No response

Screenshots

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[danny-avila]

Since it came up in a discussion on discord, I'll comment here as well.

This only seems to affect mobile browsers, as even when emulating mobile on a desktop app, it can't be observed.

This issue is purely CSS related, if anyone wants to take a stab at it: client/src/style.css

[thingersoft]

The problem resides in the ::marker pseudo-element styling:

.prose ol ol > li::marker,
.markdown ol ol > li::marker {
  content: counter(list-counter-alpha, lower-alpha) '. ';
}

Webkit has partial support for it, ignoring everything other than color and font-size properties, see bug 204163.

So what you're actually seeing before each list element in Safari isn't the result of the content property value but the default artifact generated by the browser for the list-style-type: decimal of the parent ol element. That's why the marker textual content renders in a slightly different way.

Also note that Apple doesn't allow third party engines on iOS, so even browers like Chrome uses Webkit on iOS devices.

Three possible solutions here:

1. quick and dirty: increase left padding of ol elements (slyghtly increases indentation for non Webkit browsers)
2. apply custom stylesheet for Webkit browsers
3. ditch ::marker styling in favor of standard list styling properties

I would be happy to help with a PR if you want.

[danny-avila]

@thingersoft thanks for your insight

PRs are always welcome, I'm happy to try whatever works.

Maybe we can tackle this issue at the same time? https://github.com/danny-avila/LibreChat/issues/4531

[thingersoft]

@danny-avila ok I'll take a look at #4531 also.

Before submitting my PRs I would like to know if there's any special reason that led to define ::marker content via CSS functions rather than relying on list style types.

[danny-avila]

No special reason, thank you