search

mbari-org / SeafloorMappingDB

Make MBARI seafloor mapping datasets more accessible and useful
GNU General Public License v3.0
3 stars 6 forks source link

Need to fix the Responsive View of the Mission Page's Filter and Clear Buttons. #267

Open ksalamy opened 2 weeks ago

ksalamy commented 2 weeks ago

https://github.com/mbari-org/SeafloorMappingDB/pull/266#issuecomment-2452343385

The "Filter" and "Clear" buttons should always be visible no matter size of the browser's window. They are both visible if the window is at least 1731 pixels wide.

If the window is less than 1714 pixels wide the Clear button disappears and the Filter button becomes wider.

If the window is narrowed to be less than 1648 pixels then both the Filer and Clear buttons disappear

MBARIMike commented 2 weeks ago

Using developer tools I see a css setting in the filters.css file that seems to affect the button visibility.

Before disabling min-width: max-content; in the div.col-md selector:

Screenshot 2024-11-05 at 9 32 20 AM

After disabling:

Screenshot 2024-11-05 at 9 33 03 AM

This change in the filters.css file was introduced in a commit made about 5 months ago: https://github.com/mbari-org/SeafloorMappingDB/commit/9b9e7ad224a186bb8d0eef55a19a342c23df602d#diff-39285c1134876be0fa983abf8b6470c283e2157151e1b68860d9f9d9cd5c7504R136

The .col-md selector is used by Bootstrap's grid system: https://getbootstrap.com/docs/5.0/layout/grid/#grid-options