Alinhamento da barra de cotação no celular

[Don]

Olá

No celular, os botões da barra de citação têm mais opções do que antes, agora temos também
Copiar Citação e
Perguntar à IA, o que a torna mais larga e pode facilmente transbordar da tela em telas menores e especialmente em idiomas que têm traduções mais longas para esses rótulos.

Em húngaro, é muito pior…

Acho que uma das melhores soluções é provavelmente fazer com que os botões sejam classificados em coluna. Agora os botões acionam o (composer, modal, toast) e fecham a barra de citação, diferente de antes quando estava aberta na barra de citação em (Editar, Perguntar à IA). Temos mais espaço livre e é muito mais fácil lidar com esses botões.

Algo assim:

Celular / 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]

Houve um experimento de design para remover o texto antes de Hide text in text select popup menu - Feedback. Mas eu gosto ainda mais da sua solução!

[chapoi]

Você tem toda a razão que a implementação atual deixa a desejar.

Gostei da sua proposta à primeira vista, mas como ela se comporta ao selecionar uma palavra na borda direita (neste caso, “pretty”, por exemplo), ou um pedaço maior de texto? Ambas as situações poderiam tirá-la da tela também. Em geral, o posicionamento dessas coisas é muitas vezes a parte difícil.

Eu adoraria vê-la em ação também, além de capturas de tela, se possível.

(Mas nós definitivamente deveríamos consertar o overflow horizontal atual!)

[Don]

@chapoi

mas como ele se comporta ao selecionar uma palavra na borda direita (neste caso, “pretty”, por exemplo), ou um pedaço maior de texto? Ambas as situações podem empurrá-lo para fora da tela também. Em geral, o posicionamento dessas coisas é muitas vezes a parte difícil.

Ele se alinha muito bem.

Aqui está a demonstração do criador de temas: Theme Creator

[chapoi]

Adicionei uma solução semelhante no core neste commit.

Obrigado por levantar a questão @Don !