Alineación de la barra de cita en móvil

[Don]

Hola

En el móvil, los botones de la barra de citas tienen más opciones que antes; ahora también tenemos
Copiar cita
y
Preguntar a la IA
, lo que la hace más ancha y puede desbordarse fácilmente de la pantalla en pantallas más pequeñas y, especialmente, en idiomas que tienen traducciones más largas para estas etiquetas.

En húngaro es mucho peor…

Creo que una de las mejores soluciones es probablemente hacer que los botones se ordenen en columna. Ahora los botones activan el (compositor, modal, toast) y cierran la barra de citas, no como antes cuando se abría en la barra de citas en (Editar, Preguntar a la IA). Tenemos más espacio libre y es mucho más fácil manejar estos botones.

Algo así:

Móvil / CSS

.quote-button {
  .buttons {
    flex-direction: column;
    > *:not(:last-child) {
      border-bottom: 1px solid var(--primary-low);
    }
    > .btn,
    .ai-post-helper__trigger {
      width: 100%;
      padding: 0.65em;
      justify-content: flex-start;
    }        
  }
}

[Moin]

Hubo un experimento de diseño para eliminar el texto antes de Hide text in text select popup menu - Feedback. ¡Pero me gusta aún más tu solución!

[chapoi]

Tienes toda la razón en que la implementación actual deja mucho que desear.

Me gusta tu propuesta a primera vista, pero ¿cómo se comporta al seleccionar una palabra en el borde derecho (en este caso, “pretty”, por ejemplo), o un fragmento de texto más grande? Ambas situaciones también podrían sacarlo de la pantalla. En general, la posición de estas cosas suele ser la parte difícil.

Me encantaría verlo en acción también, además de capturas de pantalla, si es posible.

(¡Pero definitivamente deberíamos solucionar el desbordamiento horizontal actual!)

[Don]

@chapoi

pero ¿cómo se comporta al seleccionar una palabra en el borde derecho (en este caso “pretty”, por ejemplo), o un fragmento de texto más grande? Ambas situaciones podrían sacarlo de la pantalla. En general, el posicionamiento de estas cosas suele ser la parte difícil.

Se alinea bastante bien.

Aquí está la demostración del creador de temas: Theme Creator

[chapoi]

He añadido una solución similar en el núcleo en este commit.

¡Gracias por mencionarlo @Don!