Quote bar alignment on mobile

ux
1

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.

Screenshot 2024-07-11 at 10.45.55
Screenshot 2024-07-11 at 10.45.55374Ă—629 60.7 KB

In Hungarian language it much worse…

Screenshot 2024-07-11 at 10.47.33
Screenshot 2024-07-11 at 10.47.33372Ă—630 63.3 KB

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:

Screenshot 2024-07-11 at 10.55.24
Screenshot 2024-07-11 at 10.55.24373Ă—631 58.5 KB

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 Likes
2

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!

4 Likes
3

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!)

3 Likes
5

It aligns pretty well.

Here is the theme creator demo: Theme Creator

5 Likes
6

I’ve added a similar solution in core in this commit.

Thanks for bringing it up @Don !

3 Likes