Fix: Pet settings dropdown on staff "Pets" page are cut off when only one pet is displayed

[jmilljr24]

When only one pet is shown on the table, the setting's dropdown is cut off at the bottom so not all of the options are displayed.

The settings dropdown should display the same as when multiple pet's are in the table.

Fix

Correct

[OliverLeighC]

Could I work on this?

[jmilljr24]

@OliverLeighC All yours! Let me know if you have any questions.

[OliverLeighC]

Looks like it's "expected behavior" for responsive tables 😭 https://github.com/tabler/tabler/issues/1343#issuecomment-1308569481

but I am going to see if I can get the suggested popper config fix to work

[OliverLeighC]

Hmm... setting popper config to {strategy: "fixed"} reveals the full menu but doesn't behave nicely when scrolling

https://github.com/rubyforgood/pet-rescue/assets/51760107/571bbcfc-206a-454f-a411-786570443ce5

Will keep investigating

[jmilljr24]

Hmm... setting popper config to {strategy: "fixed"} reveals the full menu but doesn't behave nicely when scrolling Clip.mov

Will keep investigating

I really appreciate you playing around with this. If none of the suggestions that you linked to give good results or if there will be some compromises, post an update and the team can discuss it.

[jmilljr24]

@OliverLeighC Setting a mini-height of the table might be the easiest option. The dropdown doesn't have a lot cut off so it might work out ok to set a min-height and adjust table headers to fit. But whatever works best!

Also #694 will add a mobile view so if you need to adjust the responsiveness to get it to work feel free. The breakpoint in that issue 1100 px

[OliverLeighC]

Sounds good, will play around with the min height and see what works

[OliverLeighC]

here is what it looks like with the min-height:

more rows for comparison:

I think it looks okay, will submit my PR but let me know if it needs tweaking