style: votes page horizontally scrollable on mobile

[bonustrack]

On mobile and on the page "votes" there isn't enough space to show the content for votes, we should make the table scrollable horizontally, similar than site like https://www.coingecko.com The cells should have a minum width so it doesnt take extra line, (first cell dont need to be sticky like on coingecko).

[ChaituVR]

Delegates and leaderboard use similar layout, what should happen to them? same as votes?

[ChaituVR]

I had a blocker with sticky property on thead, will wait for this https://github.com/snapshot-labs/sx-monorepo/issues/145#issuecomment-2104404066

[wa0x6e]

We currently hide some column in smaller screen.

I guess with this feature, we keep columns ?

[wa0x6e]

I had a blocker with sticky property on thead, will wait for this #145 (comment)

Merged, so this can move on

[ChaituVR]

sticky doesn't work here. we may have to remove the stickiness of this page. also, the vote % in the background for each will not be correct if we allow horizontal scrolling.

[Sekhmet]

I bumped it to Medium as I think it will require quite a bit of work.

[wa0x6e]

@bonustrack What's the decision here, following the issues raised by chaitu ?

[bonustrack]

sticky doesn't work here. we may have to remove the stickiness of this page. also, the vote % in the background for each will not be correct if we allow horizontal scrolling.

For the background with vote % if the page is larger than the screen we can make the bg sticky and base the % from the screen width (and not the whole page width). Does it make sense?

[wa0x6e]

And we remove sticky?

[bonustrack]

For the sticky, I'm not sure what's blocking, we can use div if table is not working

[wa0x6e]

Not an issue of table or div, sticky does not simply seem to work when inside overflow: scroll, it does not stick

[ChaituVR]

There are two problems with this:

1. If we want sticky nature like below video, we won't able to make it horizontally scrollable https://github.com/user-attachments/assets/30bc0a8f-663b-4070-b290-6720dbee1779

2. Not sure how we want to handle voting power in the background,

   

   Here we have the same width as the screen, so if a user 50%, it will add a background of half the screen, but if we allow horizontal scroll, it may go under the scroll

[bonustrack]

Need to figure out a solution to keep the first nav with "Overview, votes, discussion" sticky

[bonustrack]

Here is an example of the UX we want done with CSS using Claude https://claude.site/artifacts/40c93fdf-5cec-4ed5-b845-232b40385d56