search

James-Lycett / workplace-wellness

0 stars 0 forks source link

Final Responsiveness Check #77

Open cozyfestiv opened 1 week ago

cozyfestiv commented 1 week ago

Go through site on your phones and find wonkiness

Also send to friends.

cozyfestiv commented 13 hours ago
James-Lycett commented 13 hours ago

How to snap a scroll is actually a really interesting question idk how to do that. Might start by defining the entries table height to a certain multiple of table cell height so they fit exactly (e.g., a 100px table fits 5 20px cells)

Here's some stuff: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap/Basic_concepts](CSS scroll snap)

[https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo](scrollTo() method)

cozyfestiv commented 12 hours ago

Yeah, I thought i found a way to do it in Tailwind, but I haven't been able to get it to work yet

I'll check out those articles

cozyfestiv commented 10 hours ago

Yeah, I tried this way too, and it didn't work, I'm a little stumped.

James-Lycett commented 9 hours ago

Hmm I'll take a crack at it tonight. I imagine css is kinda touchy about which exact parent element is the container and which exact child elements are the snaps and that might be complicated by the flowbite-react table

cozyfestiv commented 7 hours ago

Yeah I tried assigning it to a few different places but couldn’t get it to go

Greg Topscher Web Developer || Artist (703)600-9091 LinkedIn https://www.linkedin.com/in/gtop/

On Wed, Jul 10, 2024 at 4:21 PM James Lycett @.***> wrote:

Hmm I'll take a crack at it tonight. I imagine css is kinda touchy about which exact parent element is the container and which exact child elements are the snaps and that might be complicated by the flowbite-react table

— Reply to this email directly, view it on GitHub https://github.com/James-Lycett/workplace-wellness/issues/77#issuecomment-2221368784, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6GRBVK4NCJ7D5U64H4YYHTZLWJT5AVCNFSM6AAAAABKKPN6DWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRRGM3DQNZYGQ . You are receiving this because you authored the thread.Message ID: @.***>

James-Lycett commented 4 hours ago

Ok I got it. Took me a bit of messing around and I'm not sure what you tried but the key for me was to make sure my container classes (snap-y, snap-mandatory) were on the same element that has the overflow class. So rather than put the snap classes on the Table element I put them on its parent div, which is where overflow was. Snap-start (the requisite individual child component scroll-snap-align class) just went on the UserRecordsList.jsx Table.Row element.

From mdn: "You can do this by ensuring that the scroll container has a defined size and that it has overflow enabled."

Idk if this is the same issue you had but that made it click for me. I put in a pull request and merged it in case looking at the commit history would make it easier to see what I changed