search

hypothesis / lms

LTI app for integrating with learning management systems
BSD 2-Clause "Simplified" License
46 stars 14 forks source link

Make dashboard filters listboxes render always inside the viewport #6819

Closed acelaya closed 2 weeks ago

acelaya commented 3 weeks ago

Alternative to https://github.com/hypothesis/lms/pull/6812 Part of https://github.com/hypothesis/product-backlog/issues/1561

Update dashboard filtering dropdowns so that:

  1. Their listboxes never render out of the viewport, trying to make a smarter use of available space.
  2. Their listboxes never grow bigger than the body.
  3. Options with big content are truncated with text-overflow: ellipsis.
  4. A title is added with the full content of listbox options when they have been truncated.

[!NOTE] Points 1 and 2 are implicitly applied by updating frontend-shared to v8.8, which brings changes from https://github.com/hypothesis/frontend-shared/pull/1746

https://github.com/user-attachments/assets/d74a1b41-1d60-4e7a-bca6-bf8067869853

Considerations

This approach has the problem that content may not be fully displayed in mobile devices, as they cannot take advantage of the dynamic title.

However, by inspecting real production data, it has been concluded that text should usually not overflow in most of cases.

If this becomes a problem in future, we could check the screen size via window.matchMedia and avoid truncation altogether in small resolutions, where the content would wrap multiple times.