Update mobile styles

[LanesGood]

Updates mobile responsiveness for chakra styles. Majority of these are quite minor, but note that in mobile view this PR:

• changes pagination buttons to icons
• hides the "Table View" option button
• Sets the results map vertically above the results, without sticky positioning, when activated

Some of these styles could likely be achieved with the Chakra useDisclosure prop in place of toggling display: none, but that didn't seem necessary for now.

<img width="300" src="https://github.com/developmentseed/bioacoustics-frontend/assets/12634024/c28aa837-6761-4b6f-9bcc-c4227a3a9c2f />

[LanesGood]

@oliverroick thanks for the review. The scrollbar on the file name is intentional. I thought the multiple lines of random filename characters was distracting and unhelpful for the user on mobile; the component has been styled to be fixed to not wrap over multiple lines, and instead users can scroll horizontally if needed. I've now updated this to be overflow-x:auto, which removes the vertical scrollbar and only shows the horizontal scroll if the text is indeed past the viewport.

I wasn't able to replicate the map issue you had; setting a min-height and max-height seems to work fine in multiple browsers on my machine to see the map at all times:

Regardless I have updated this to set a fixed height on mobile, and viewport-dependent height on tablet/desktop.

[LanesGood]

@oliverroick I made one small change so that the map isn't too large in small grid view. Can you still see the map on mobile? It does still work for me in all browsers with mobile preview.

[oliverroick]

@LanesGood :+1: All good, this still works