Quote bar alignment on mobile

Hello :wave:

On mobile the quote bar buttons has more options then before, now we have Copy Quote and Ask AI too which makes it more wider and can easily overflow out of the screen on smaller screens and especially on languages which has longer translation for these labels.

In Hungarian language it much worse…

I think one of the best solution is probably makes it to sort the buttons in column. Now the buttons triggers the (composer, modal, toast) and close the quote bar, not like before when it’s open in quote bar on (Edit, Ask AI). We have more free space and much easier to handle these buttons.

Something like this:

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;
    }        
  }
}
10 Likes

There was a design experiment to remove the text before Hide text in text select popup menu - Feedback. But I like your solution even more!

3 Likes

You’re totally right that the current implementation leaves something to be desired.

I like your proposal at first glance, but how does it behave when selecting a word at the right edge (“pretty” in this case for example), or a bigger chunk of text? Both situations could push it off screen too. In general, positioning of these things is often the hard part.

I’d love to see it in action too, in addition to screenshots, if possible.

(But we should def fix the current horizontal overflow tho!)

2 Likes

It aligns pretty well.

Here is the theme creator demo: Theme Creator

4 Likes