Allineamento della barra delle citazioni su mobile

Ciao :wave:

Su mobile, i pulsanti della barra delle citazioni hanno più opzioni di prima, ora abbiamo anche Copia citazione e Chiedi all’IA che la rendono più larga e può facilmente uscire dallo schermo su schermi più piccoli e soprattutto su lingue che hanno traduzioni più lunghe per queste etichette.

In ungherese è molto peggio…

Penso che una delle migliori soluzioni sia probabilmente quella di ordinare i pulsanti in colonna. Ora i pulsanti attivano la (composer, modal, toast) e chiudono la barra delle citazioni, a differenza di prima quando era aperta nella barra delle citazioni su (Edit, Ask AI). Abbiamo più spazio libero e molto più facile gestire questi pulsanti.

Qualcosa del genere:

Mobile / 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;
    }        
  }
}
13 Mi Piace

C’è stato un esperimento di progettazione per rimuovere il testo prima di Hide text in text select popup menu - Feedback. Ma mi piace ancora di più la tua soluzione!

4 Mi Piace

Hai perfettamente ragione sul fatto che l’implementazione attuale lasci a desiderare.

La tua proposta mi piace a prima vista, ma come si comporta quando si seleziona una parola sul bordo destro (in questo caso “pretty”, per esempio), o un blocco di testo più grande? Entrambe le situazioni potrebbero spingerlo fuori dallo schermo. In generale, il posizionamento di queste cose è spesso la parte difficile.

Mi piacerebbe vederla in azione, oltre agli screenshot, se possibile.

(Ma dovremmo assolutamente risolvere l’attuale overflow orizzontale!)

3 Mi Piace

Si allinea abbastanza bene.

Ecco la demo del creatore di temi: Theme Creator

5 Mi Piace

Ho aggiunto una soluzione simile nel core in questo commit.

Grazie per averlo segnalato @Don!

3 Mi Piace