Выравнивание цитатной панели на мобильных устройствах

[Don]

Привет

На мобильных устройствах у кнопок в панели цитирования теперь больше опций, чем раньше. Добавлены Копировать цитату и Спросить ИИ, из-за чего панель стала шире и на маленьких экранах, особенно в языках с более длинными переводами этих меток, может легко выходить за пределы экрана.

На венгерском языке ситуация ещё хуже…

Одно из лучших решений — расположить кнопки в столбец. Теперь кнопки вызывают (компоновщик, модальное окно, уведомление) и закрывают панель цитирования, в отличие от прежнего поведения, когда (Редактировать, Спросить ИИ) открывались внутри самой панели. У нас появляется больше свободного места, и с такими кнопками становится гораздо удобнее работать.

Примерно так:

Мобильная версия / 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]

Была проведена экспериментальная правка дизайна, чтобы убрать текст до Hide text in text select popup menu - Feedback. Но мне нравится ваше решение ещё больше!

[chapoi]

Вы абсолютно правы: текущая реализация оставляет желать лучшего.

Ваше предложение на первый взгляд мне нравится, но как оно ведёт себя при выборе слова у правого края (например, «pretty» в данном случае) или при выделении более крупного фрагмента текста? Обе ситуации также могут привести к выходу за пределы экрана. В целом, позиционирование таких элементов часто оказывается самой сложной частью.

Буду рад увидеть это в действии, а не только на скриншотах, если это возможно.

(Но текущий горизонтальный переполнение, конечно, нужно исправить!)

[Don]

@chapoi

Но как это ведёт себя при выделении слова у правого края (например, «pretty» в данном случае) или более крупного фрагмента текста? Оба случая также могут вытолкнуть его за пределы экрана. В целом, позиционирование таких элементов часто является самой сложной частью.

Это выравнивается довольно хорошо.

Вот демонстрация от создателя темы: Theme Creator

[chapoi]

Я добавил похожее решение в ядро в этом коммите.

Спасибо, что подняли этот вопрос, @Don!