Números da lista renderizados incorretamente

Bug
1

Consegui reproduzir o problema aqui?

Editar: Sim, consegui. A primeira linha contém:

12345678.
7 curtidas
3

Vou renderizar a mesma lista, aumentando o atributo start em uma casa decimal para cada uma subsequente:

1. Betsy
1. Tacy
1. Tib
1. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi
  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

Consigo reproduzir. É um problema de CSS, pois o espaço padrão em listas ordenadas (<ol>) normalmente é definido para acomodar números menores.

Notei que as mesmas listas renderizam de forma diferente por tema, então criei um componente de tema que apenas adicionou:

ol {
  margin-left: 3em;
}

Por outro lado, isso também se aplica a todas as listas, e quando o item não é um número grande de 5+ dígitos, as listas ordenadas parecem ter muito espaço…

Screenshot 2022-04-01 at 12-33-08 Test numbers - Sandbox Discourse Kit
Screenshot 2022-04-01 at 12-33-08 Test numbers - Sandbox Discourse Kit636×208 3.67 KB

Minha sugestão: aplique um componente que corresponda ao seu uso de listas ordenadas em seu site; acho raro extrair o meio de uma lista muito longa de itens, e não consigo imaginar alguém postando listas com 10.000 itens sem encontrar limites de caracteres. :slight_smile:

Pensei que talvez houvesse uma maneira de estilizar para que uma determinada lista sempre coubesse, mas a numeração em listas ordenadas é aplicada como pseudo-elemento (::marker), e não tenho certeza de como fazer cálculos de CSS nesses… :thinking:

3 curtidas
8

Olá,

Lamentamos que você esteja tendo um problema com isso.

Após investigarmos mais a fundo, descobrimos que este problema específico é um pouco mais raro, então achamos que sua melhor solução será um componente de tema personalizado para modificar o CSS diretamente em seu site.

2 curtidas