Tabelas da lista de usuários transbordando o div pai?

Olá!

Estou atualmente aprendendo sobre o Discourse para um futuro fórum em português e notei que algumas tabelas estão transbordando seu div pai:


Esses exemplos foram tirados com o tema Graceful, mas isso também acontece com o tema padrão.
Isso é algo que já foi discutido antes ou devo abrir um issue sobre isso?
Obrigado! :smiley:

Acho que é um problema específico do tema; não vejo isso no meu tema.

Tente alterar o idioma. No meu caso, isso ocorre porque os cabeçalhos da tabela são um pouco grandes em comparação com o inglês.
Se eu reduzir todos os cabeçalhos da tabela para apenas uma palavra, a largura da tabela volta ao da div pai (1110px no meu caso), mas, no meu caso, os cabeçalhos são um pouco grandes, então a tabela fica mais larga que a div pai.

Acabei de fazer, sem problemas. Acho que é porque seu tema tem um tamanho de contêiner menor por causa desse grande padding/margens que vejo. No meu tema, tenho um max-width de 1250px. Ou aumente o tamanho do contêiner adicionando

.wrap {
max-width: 1250px;
}

ou tente diminuir essas margens.

1 curtida

Isso está em uma instalação local totalmente nova, sem nenhuma personalização, apenas alterei o idioma e abri a tabela de usuários:

Estou de bom humor hoje! Me envie o link do seu quadro e dou uma olhada rápida para você, se quiser :slight_smile:

1 curtida

Essa é uma página diferente — parece ser a página /users, enquanto a captura de tela no primeiro post é a lista de usuários do administrador. Vou esclarecer editando o primeiro post.

Jeff, a segunda imagem é da página /users.
Desculpe, eu deveria ter tirado novas capturas de tela com o tema padrão.

Aqui está o link do quadro com o tema padrão:
https://abreojogo.flying-ape.com/u

Acho que encontrei. Não consegui vê-lo no meu tema porque tenho uma largura máxima de 1250px, então ele fica maior.
Adicione isso na sua aba Desktop:

body .directory table th.sortable {
    white-space: initial;
}

Por aba Desktop, quero dizer aqui:

Edição: @codinghorror Sim, Jeff, isso também está presente no tema padrão por causa do
white-space: nowrap; no arquivo discourse.scss, linha 312.

2 curtidas

Obrigado, Cos, isso resolveu! :star_struck:
Também adicionei isso para corrigir o mesmo problema na página /admin/users:

body .admin-contents table th.sortable {
    white-space: initial;
}
1 curtida

Isso destaca um pequeno problema com a rolagem infinita e tabelas largas… Eu demonstro isso aqui:

O comportamento atual é que rolamos toda a aplicação horizontalmente nesses casos… geralmente tentamos evitar isso, mas se você assistir à segunda metade do vídeo, verá que tentar resolver isso pode piorar as coisas. Se ocultarmos o overflow e adicionarmos uma barra de rolagem horizontal apenas para rolar o excesso da tabela, a barra de rolagem fica na parte inferior da tabela e não fixada na parte inferior da viewport… então é realmente difícil de alcançar quando estamos carregando novos resultados conforme você rola.

Acho que a melhor opção é provavelmente adicionar outra barra de rolagem no topo das tabelas com overflow, usando algum JavaScript?

1 curtida

Sim, a segunda parte com a solução é pior.
Para mim, o problema das tabelas largas que transbordam é que isso quebra o design da página, já que todo o resto está devidamente contido e alinhado.

Mas imagino que não haja uma solução fácil para isso e que a melhor correção por enquanto seja evitar ter essas tabelas largas desde o início.

1 curtida