search

georgetown-cset / parat

🦜 PARAT: CSET's Private-sector AI-Related Activity Tracker
https://parat.cset.tech
Other
4 stars 0 forks source link

Button overflow on mobile #464

Closed jmelot closed 6 days ago

jmelot commented 6 days ago

Just noticed this while checking the site on my phone.

Screenshot_20240625-212706.png

jmelot commented 6 days ago

We do have nice mobile-friendly buttons if you resize the screen to mobile, but they don't display if the page is already at mobile dimensions on load.

jmelot commented 6 days ago

I bet this was introduced here https://github.com/georgetown-cset/parat/commit/1eaba9004e4fc0f04aeedd2e5b7eee547e9b9970 - a hacky way to fix would be to add a param to useWindowSize, you may come up with a better way

brianlove commented 6 days ago

@jmelot @za158 I can make it so that the left and right halves of the button bar wrap onto separate lines when the viewport is too narrow, but then we get weirdness like this at medium widths:

image

Theoretically this could be solved with a bunch of complicated JS to calculate how much space there is based on the "Viewing X of Y ..." labels and then show/hide button labels appropriately, but that'd be complicated to develop and require some significant testing to make sure it's all working as expected

(For what it's worth, the current version works perfectly until you filter the list 😆 )

jmelot commented 6 days ago

I'm not too opposed to that for intermediate cases. But we have mobile-friendly buttons that appear when you resize the screen from wide to narrow (which I'd forgotten), updating the code to have those display when the user initially loads a narrow page would be great