Keywords search placeholder text cut off at narrow sizes

[dylanmccall]

Observed behavior

When the viewport is between and 840 and 1264 pixels, Kolibri's left sidebar is made narrower, which includes the Keywords search input (.search-box-row .search-input). This input field has placeholder text saying "Find something to learn".

At the narrower size, the placeholder text is cut off. On my device, it displays "Find someth". The problem is exacerbated by another element (.search-box-row .search-buttons-wrapper) causing the available space for the actual input field to be quite small despite the reserved space being empty.

Expected behavior

Instead, either this placeholder text should be replaced with a shorter string at this breakpoint, or it should be removed altogether. (One convention is to place a small label below the input field with the same text).

In addition, the appearance of .search-clear-button could be conditional on whether the placeholder text is displayed.

User-facing consequences

The result of this is Kolibri's Library page looks kind of incomplete with a wide range of viewport sizes.

Context

• Kolibri version: Kolibri 0.16.2 via https://flathub.org/apps/org.learningequality.Kolibri
• Operating system: Fedora Silverblue 40
• Browser: Both Firefox (with which I took the screenshot), and kolibri-gnome.

[kartik-212004]

I'm interested in working on this issue and would appreciate being assigned to it.

[MisRob]

Hi @kartik-212004, thank you for volunteering. Let me confirm first with our designers what exactly we want to see as the expected behavior. I will get back to you.

[MisRob]

Hi @kartik-212004, so here we'd like to achieve the following behavior:

• In all cases, truncate "Find something to learn" with ellipsis ...
• Further improve experience by changing "Find something to learn" string to only "Find" on all smaller breakpoints where "Find something to learn" is not visible in its entirety (truncation described above serves rather as fallback to this behavior because we may not be able to estimate precisely)

You would need to add a new string "Find". See https://kolibri-dev.readthedocs.io/en/develop/i18n.html.

Let me know if we should assign you.