Habilitar el chat cambia el relleno de main-outlet en móvil

Habilitar el chat cambia el relleno de mi main-outlet en dispositivos móviles de la siguiente manera:

antes

después

El CSS relevante del chat está aquí:


(el relleno se sobrescribe de 1em a 0)

Entiendo que todavía está en desarrollo y las cosas pueden cambiar. Supongo que tiene sentido establecer el relleno a cero en la página de chat, pero termina aplicándose a todas las páginas.


Una segunda cosa que noté es que en dispositivos móviles, mi teclado cubre lo que estoy escribiendo (android/chrome):

compáralo con Discord, donde el cuadro de texto se coloca encima del teclado

Esto se siente más como un error que como algo simplemente pasado por alto. Puedo investigar más sobre este problema para ver si es otro componente del tema o algo que lo causa si es un error específico de mi parte.

¿Tienes la versión de Android / versión de Chrome, por favor?

¿Estás seguro de que esto viene del chat? No tenemos un archivo chat-mobile.scss que yo sepa.

Permítame aclarar si he instalado el chat de la manera correcta primero,
Reconstruí mi instancia anoche. No incluí el chat en mi archivo app.yml; ¿entiendo que ahora es un plugin que viene con el núcleo de Discourse?


El enlace URL lleva aquí: discourse/plugins/chat at main · discourse/discourse · GitHub

Encontraré de dónde proviene este chat-mobile.scss.

Sí, ahora es un plugin principal

Es posible que me esté perdiendo algo aquí… pero, de memoria, no sé dónde estaría esto en el plugin actualmente. Tenemos algo con relleno, pero se supone que esto está limitado a .has-full-page-chat y, como resultado, no debería afectar a otras páginas.

1 me gusta

Lo encontré, parece ser del tema Discourse Air que estoy usando

Lo uso con algo de mi propio CSS anulando, así que creo que este es un problema “mío” en este caso.


Investigaré el problema del teclado, asumo que este comportamiento no es intencional, ¿verdad?

1 me gusta

Sí, no es intencional :slight_smile:

He aislado el problema. Tengo un par de componentes que usan el outlet below-site-header (es decir, un banner giratorio y una barra de navegación). ¿Supongo que su altura no se está teniendo en cuenta correctamente?

captura de pantalla completa

Estos son componentes personalizados que he escrito, así que tal vez sea otro “problema mío”, pero también podría ser que cualquier cosa en below-site-header pueda ser un problema, en cuyo caso se convierte en un “problema nuestro” :slight_smile:

1 me gusta

¿Pero cómo funcionaría eso? Te quedarían 50px de altura para mostrar el chat.

Creo que el problema principal es que cuando tocas el cuadro de texto del chat, la pantalla salta a la parte superior de la página y el contenido en below-site-header se vuelve visible.

ejemplo de video

Creo que tendría más sentido si la página saltara a una posición donde la parte inferior del div del chat estuviera justo encima del teclado. O tener el div del cuadro de texto fijo en la parte inferior de la página (y la parte superior del teclado) para que siempre sea visible y se superponga a todo.

Independientemente de la solución ideal, el cuadro de texto debería ser la máxima prioridad de lo que es visible en la pantalla, incluso si solo hay 50px disponibles.