search filter chips are too closely spaced

[indirectlylit]

Observed behavior

The chips are very cramped with each other and their surrounding elements:

Expected behavior

The design system specifies an 8px baseline grid

User-facing consequences

Search interface becomes slightly harder to read and visually inconsistent

Context

0.15.0 beta1

[sharifmaryam]

I would like to contribute but I am unsure where these chips are in the codebase.

[indirectlylit]

One way to find code is to search the codebase for user-facing strings. Here for example if you search for Clear all, case-sensitive, in *.vue files you'll find:

• https://github.com/learningequality/kolibri/blob/release-v0.15.x/kolibri/plugins/learn/assets/src/views/LibraryPage.vue
• https://github.com/learningequality/kolibri/blob/release-v0.15.x/kolibri/plugins/learn/assets/src/views/SearchChips.vue

[abhimnc]

If no one is working, can I take this issue ? I already got one pull request merged in #8720 .

[sharifmaryam]

I am working on this ticket.

[sharifmaryam]

• https://github.com/learningequality/kolibri/blob/release-v0.15.x/kolibri/plugins/learn/assets/src/views/SearchChips.vue

I think I understand how to implement a solution but I am having trouble recreating this page locally so I can test to see if the change works. Do you have any suggestions on how to go about that?

[indirectlylit]

@sharifmaryam see https://kolibri-dev.readthedocs.io/en/develop/getting_started.html for instructions on setting up your development environment

[rtibbles]

Once you have got it set up, you would need to import some content into the device locally (using the Device tab), and then go to Learn --> Library and use the search functionality in the side panel. Once you have started filtering, it should start to display these search chips.