Open collective member list is cut off on mobile

[ebanner]

Looks like the open collective member list is a little cut off on mobile for me

[ebanner]

Digging into this...

I found I can reproduce it on chrome in mobile mode

It seems like the open collective widget is from this line

https://github.com/TampaDevs/tampadevs/blob/4e06bca526d894dcc7444ec3bec211d912c024c0/src/_includes/layouts/home.njk#L69

which gets expanded into an iframe.

I saw that if I disable box-sizing: border-box; in the browser, then it doesn't get cut off anymore vertically

which comes from this rule

https://github.com/TampaDevs/tampadevs/blob/4e06bca526d894dcc7444ec3bec211d912c024c0/src/_assets/scss/style.scss#L30

I didn't find a styling rule on our end (yet?) that sets a height on this region

cc @manuelosorio

Links

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

[manuelosorio]

We want to have box-sizing set to border box. Disabling seems to fix the issue is because the box model is then being used. But it introducing a lot more issues. I found a fix am implementing it right now.

Thank you for reporting this issue

[ebanner]

Cool 👍

I was looking into it more and it looks like the culprit (?) is using height: auto here on the iframe

https://github.com/TampaDevs/tampadevs/blob/4e06bca526d894dcc7444ec3bec211d912c024c0/src/_assets/scss/_tdevs_custom.scss#L157-L163

It does the right thing on desktop, but the wrong thing on mobile. When you disable, it shows all the contributors in multiple lines

Curious what your fix is. It's not clear to me how you would fix it

[ebanner]

Oh, I see. We actually do want to show all the contributors heh