Facility > Users - Longer header titles for some languages cause issues

[pcenov]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Task

Try some stuff out:

Dynamic columns

1. Try making it so that column width matches to the width of the text dynamically. Create a draft PR with this solution.
2. Get feedback on the solution after testing across all device types and sizes and languages
3. Revise implementation based on feedback.

Separating sort buttons from heading text

If none of the above result in a suitable solution, then try what is described here:

1. Revise the heading cell's layout so that the label and column-sort buttons are on the same x-axis visually, but the heading wraps on the left side and the buttons sit statically on the right side of the header cell.
2. Share screenshots of this UI and gather feedback.

Finally

• You have gathered feedback and explained the final outcomes here
• You have tested all combinations of screen sizes and, ideally, the "app mode" or the Android app physically AND you've tested with various languages (or just manually put in long messages if some headings aren't translated yet).

---

original report:

Observed behavior

See the screenshot:

Expected behavior

It seems that in Figma the titles are smaller and it should be further discussed what can be done for longer strings...

Steps to reproduce the issue

1. Install the build from https://github.com/learningequality/kolibri/releases/tag/v0.19.0-beta0
2. Go to Facility > New users and observe the header titles

Usage Details

Kolibri 0.19.0b0
Windows 11, Ubuntu 22, Mac OS 15.5 - Chrome, Firefox

[pcenov]

@radinamatic

[nucleogenesis]

I think we have to word-wrap no matter what, but perhaps we should make the icons showing sorted-ness absolutely positioned to the side so the text's wrapping doesn't impact the position of the sort indicator (thoughts @tomiwaoLE @marcellamaki)

[marcellamaki]

The other options would be to make the headers dynamically resize to the text length. I don't know if that's better (and it may give us way too much width in some languages), but.. maybe we can also try that, even if just in a draft PR, and then compare the two? I think this is technically doable within KTable right now, although it might not be out-of-the-box-with-a-prop doable