Page MenuHomePhabricator

[web] Fix search area in filter panel
ClosedPublic

Authored by inka on Mar 14 2023, 1:47 AM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Mar 5, 11:31 PM
Unknown Object (File)
Tue, Mar 5, 11:31 PM
Unknown Object (File)
Tue, Mar 5, 11:31 PM
Unknown Object (File)
Tue, Mar 5, 11:31 PM
Unknown Object (File)
Tue, Mar 5, 11:31 PM
Unknown Object (File)
Feb 23 2024, 8:17 AM
Unknown Object (File)
Feb 23 2024, 7:07 AM
Unknown Object (File)
Feb 23 2024, 6:54 AM
Subscribers

Details

Summary

There were actually two problems: on Firefox in prod mode the collapse button was outside of the filter panel, and on Chrome the filter panel would change its width when user typed something in and
there was no match.
The second problem was caused by the calendar overflowing and squeezing the filter panel to less than its fixed width of 300px. This is fixed by setting width: min-content on calendar content -
that tells the table to expand as little as it needs, then setting flex-grow: 1 on the content to tell it to take up the remaining space (otherwise it was as small as it needed so very narrow), and
setting flex-grow: 1 on the container for the same reason.
The first problem was caused by the fact that input elements have different widths in different browsers (the num of pixels is calulated differently). And the default input in firefox is just too
wide. This is solved by setting size="10"
on the input element, which setins it min width to be smaller that the default. flex-grow: 1 on its parent - .search makes sure it takes up as much space as possible, soo this doesn't break
other browsers. The minimum value of size="10" is small enought for all Chrome, Safari and Firefox. (size is a number of characters the field is supposed to display and based on that the width of
the input is calculated, but it is calculated differently by different browsers)

Test Plan

Run web app in dev and prod mode on Chrome, Firefox and Safari, and checked that the search area displays correctly both when there is nothing typed in and when the user is tying something.

Diff Detail

Repository
rCOMM Comm
Branch
inka/fix_filter_search_area
Lint
No Lint Coverage
Unit
No Test Coverage