Make forms more adaptable on narrower screens

pashiav commented 7 months ago

Describe the bug At browser widths less than 1000px, Interaction pages have a portion of its content cut off.

To Reproduce

Go to any Interaction page (https://lsumzmammals9823-edge-2.test.specifysystems.org/specify/view/loan/new/)
Resize browser width to anywhere < 1000px
See content cut off

Expected behavior Content should adjust to always be viewable to the user.

Evidence Video shows edge issue then shows expected behavior in v7.9.3.1

https://github.com/specify/specify7/assets/118556884/067aa9f4-ba45-463b-b469-24b3e844da4b

OS: macOS Monterey (12.6.5) Browser: Chrome Specify 7 Version: edge Database Name: lsumz_mammals_9_8_23

maxpatiiuk commented 7 months ago

It's not cut off, it just gets a vertical scroll-bar And it's getting a vertical scroll bar rather than shrinking because there is no more space for it to shrink

Solutions:

Have user define a form with fewer horizontal columns
We should fix this bullet point from https://github.com/specify/specify7/issues/2826: Allow defining separate forms for mobile devices (or enabling autogenerated forms just for mobile devices) - which would either make it easier for people to define more flexible forms (i.e auto convert from 4 columns to 2 on narrower screens), or fix this in some other way. Rather than closing this issue, I would repurpose it to serve as that bullet item, as we don't yet have a separate issue for it

emenslin commented 2 months ago

Can recreate in edge (7.9.6)

specify / specify7

Make forms more adaptable on narrower screens #4565