Skip to content

Switch klistwithoverflow flex-wrap style - #1281

Draft
AlexVelezLl wants to merge 1 commit into
learningequality:developfrom
AlexVelezLl:enhance-klistwithoverflow-flexwrap
Draft

Switch klistwithoverflow flex-wrap style#1281
AlexVelezLl wants to merge 1 commit into
learningequality:developfrom
AlexVelezLl:enhance-klistwithoverflow-flexwrap

Conversation

@AlexVelezLl

@AlexVelezLl AlexVelezLl commented Jun 8, 2026

Copy link
Copy Markdown
Member

Description

Switch KListWithOverflow flex-wrap from wrap to nowrap. This will remove a small tick where, for at most 100ms, a second row of KListWithOverflow is visible. The overflow: visible is kept to prevent issues with the focus outline and popup elements rendered as children of the list.

Targeting develop as this introduces a subtle breaking change: Now the container needs to ensure a proper min-width value is set so that the list can shrink properly (previously this wasn't needed because flex-wrap: wrap already handled this need.

This breaks the LanguageSwitcherFooter component on Kolibri, given that there the container cannot provide a proper min-width value, so a proper fix should be opened there before merging this PR.

Before/after screenshots

Before:

Grabacion.de.pantalla.2026-06-08.a.la.s.3.26.15.p.m.mov

After:

Grabacion.de.pantalla.2026-06-08.a.la.s.3.27.24.p.m.mov

Changelog

  • Description: Fixes a small tick where two rows can be seen for at most 100ms when resizing a KListWithOverflow component.
  • Products impact: bugfix.
  • Addresses: -.
  • Components: KListWithOverflow.
  • Breaking: yes
  • Impacts a11y: no
  • Guidance: Make sure KListWithOverflow's containers can calculate and ensure a proper min-width value so that the list can be shrunk.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant