¿Las tablas de la lista de usuarios desbordan el div padre?

¡Hola!

Actualmente estoy aprendiendo sobre Discourse para un futuro foro en portugués y noté que algunas tablas se desbordan de su div padre:


Estos ejemplos se tomaron con el tema Graceful, pero esto también ocurre con el tema predeterminado.
¿Es algo que se haya discutido antes o debería abrir un problema al respecto?
¡Gracias! :smiley:

Creo que es un problema específico del tema, no lo veo en mi tema.

Intenta cambiar el idioma; en mi caso, esto sucede porque los encabezados de la tabla son un poco más grandes en comparación con el inglés. Si recorto todos esos encabezados de la tabla a una sola palabra, el ancho de la tabla vuelve al ancho de su div padre (1110 px en mi caso), pero en mi caso los encabezados son un poco grandes, por lo que la tabla se vuelve más ancha que su div padre.

Acabo de hacerlo y no hay ningún problema. Creo que se debe a que tu tema tiene un tamaño de contenedor más pequeño debido a ese gran relleno/márgenes que veo. En mi tema tengo un max-width de 1250px. O bien aumenta el tamaño del contenedor añadiendo

.wrap {
max-width: 1250px;
}

o intenta reducir esos márgenes.

1 me gusta

Esto es en una instalación local completamente nueva sin personalizaciones, solo se cambió el idioma y se abrió la tabla de usuarios:

¡Hoy estoy de buen humor! Si quieres, envíame el enlace de tu tablero y echaré un vistazo rápido. :slight_smile:

1 me gusta

Esa es una página diferente: parece la página /users, mientras que la captura de pantalla en el primer mensaje es la lista de usuarios de administrador. Lo aclararé editando el primer mensaje.

Jeff, la segunda imagen es de la página /users.
Lo siento, debería haber tomado nuevas capturas de pantalla con el tema predeterminado.

Aquí está el enlace al tablero con el tema predeterminado:
https://abreojogo.flying-ape.com/u

Creo que lo encontré. No pude verlo en mi tema porque tengo un ancho máximo de 1250 px, así que es más grande.
Agrega esto en tu pestaña Escritorio:

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

Por pestaña Escritorio me refiero a aquí:

Edición: @codinghorror Sí, Jeff, también está presente en el tema predeterminado debido a eso
white-space: nowrap; en discourse.scss línea 312.

2 Me gusta

¡Gracias, Cos, eso lo soluciona! :star_struck:
También agregué esto para solucionar el mismo problema en la página /admin/users:

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

Esto destaca un pequeño problema con el desplazamiento infinito y las tablas anchas… Lo demuestro aquí:

El comportamiento actual es que desplazamos toda la aplicación horizontalmente en estos casos… por lo general intentamos evitarlo, pero si observas la segunda mitad del video, verás que intentar solucionarlo puede empeorar las cosas. Si ocultamos el desbordamiento y agregamos una barra de desplazamiento horizontal solo para el desbordamiento de la tabla, la barra aparece en la parte inferior de la tabla y no está fija en la parte inferior de la ventana visible… por lo que es muy difícil de alcanzar cuando estamos cargando nuevos resultados mientras avanzas.

Creo que la mejor opción sería probablemente agregar otra barra de desplazamiento en la parte superior de las tablas con desbordamiento, usando algo de JavaScript.

1 me gusta

Sí, la segunda parte con la solución es peor.
Para mí, el problema de las tablas anchas que se desbordan es que rompen el diseño de la página, ya que todo lo demás en la página está correctamente contenido y alineado.

Pero supongo que no hay una solución fácil para esto y la mejor corrección por ahora es evitar tener estas tablas anchas desde el principio.

1 me gusta