A difference in text labels length in various languages breaks UI

[neuro18]

Describe the bug

The meaning of phrases in one language is sometimes impossible to convey in the same length of text in another language.

It may be worth using uniformly understood symbols (iconography) in the UI where possible instead of text labels. Much like in popular messengers.

For example, "visibility of memos" English vs Russian text labels in the current version are:

• "Private" vs "Видно только вам"
• "Workspace" vs "Видно только пользователям"
• "Public" vs "Видно всем".

This applies to many other text labels in various languages and usually manifests itself in the UI mobile mode.

In this particular case, I'm asking you to replace russian labels for their shorten versions, which still convey the same meaning considering the context:

• "Private" = "Только вы"
• "Workspace" = "Участники"
• "Public" = "Все"

Steps to reproduce

1. Open Memos UI in smartphone browser (in default mobile mode).
2. Set Russian (or Ukrainian) language for the UI.
3. Create or edit a memo, switch between different memo visibility options.
4. Observe how "Memo visibility" drop-down list, "Cancel" and "Save" buttons extend beyond the memo boundaries.

The version of Memos you're using.

v0.22.5

Screenshots or additional context

Mobile view, portrait orientation.

Example 1: Creating new memo

Example 2: Editing existing memo

[neuro18]

In addition, I've looked at the content of a source file with all Russian labels. Many of them were translated clearly without minding their effect on the UI, are overly complicated, can be significantly shortened.

The problem for the translator person is that they have to have a decent thesaurus, a great deal of experience with different UIs and UX in general, actually have to see each of these text labels in the UI with there own eyes, not just simply translate them in a file. And only then come up with something fitting the allotted space in UI elements, without corruption of the original meaning within a context. It's a mind boggling and time consuming task for an enthusiast.

I'm sure it also applies to many other translations as well.

[neuro18]

Another option is a fixed UI elements size proportionly to each other, truncated text to display if it doesn't fit completely. In a case of a dropdown list, for example, text can be displayed in full when the list is opened.

I don't know. Is there a more universal solution, other then balanced iconography?

[johnnyjoygh]

Another option is a fixed UI elements size proportionly to each other, truncated text to display if it doesn't fit completely.

This one works for me

[JodhwaniMadhur]

I would like to take this up

[JodhwaniMadhur]

@neuro18 @johnnyjoygh Can we define a fixed size here? If we go into responsive mode, we can make it as small as we want, and it will still break the UI!

I have been able to achieve the truncated text for the dropdown

I hope the one below is fine?!

Here as you can see that even with different selected options, the size of dropdown is same.

[neuro18]

It still needs to be in one line.
Imagine this line with control elements as a table:

| for drop-down list | for cancel + save |
or
| for drop-down list | for cancel | for save |

Table itself scales with memo canvas. But rows, where you put your UI elements, scale with the table.

Drop-down list row aligned to the left.

Proportion distribution of rows:

| the rest of space for the list UI element | put here cancel + save buttons in full text |

or

| the rest of space for the list UI element | put here cancel button in full text | put here save buttons in full text |

Size of drop-down list will depend of its text length, but will never exceed the size of its row. In that case, drop-down list will fill the entirety of respected row, and text will be automatically truncated. But table itself won't change its size within memo canvas.

It's really an easy thing to implement, done with tables in HTML design.

[neuro18]

Tables inside tables, if needed.

[boojack]

@johnnyjoygh I started with a simple implementation to prevent UI broken 4b28dfd. And it's a bit difficult to control the renderer of Joy-UI selector, so maybe we should implement a simple version of our own selector in https://github.com/usememos/mui.

[JodhwaniMadhur]

@boojack why don't we truncate the dropdown to a fixed size and the save button as well? The dropdown then only shows all the options in full when opened like i just suggested up above?

[boojack]

@JodhwaniMadhur In the screenshot you provided, the text isn't truncated like This is an content but trunc..., it's just not displayed forcibly. And the buttons are split into two lines, which doesn't look like a better solution.

[JodhwaniMadhur]

@boojack solved this!

I don't think we need this anymore.