On a bird's full info page, make the two columns sticky

[thomasxwright]

it's time to get sticky with mickey https://youtu.be/CSSkhq0Us7M?t=47

Currently without any styling or stickiness, a bird's full info page can feel barren once you scroll past either the images OR the text and are left looking at just one remaining column.

Set the shorter of the two columns to stick to the bottom of the page when there isn't any more of it to scroll through. instead of it entirely scrolling up off-page.

[thomasxwright]

They should be conditionally sticky: use an intersection observer. Sticky to the top when the column isn't obscured by the viewport, and to the bottom when it is partly obscured.

As mentioned here and here: https://stackoverflow.com/questions/45514676/react-check-if-element-is-visible-in-dom

https://stackoverflow.com/questions/58341787/intersectionobserver-with-react-hooks/67826055#67826055

[thomasxwright]

Made them conditionally sticky both to the top and the bottom depending on the intersection observers for the columns.