CookieConsent cannot be hidden properly on very small screens

[lindapaiste]

p5.js version

No response

What is your operating system?

None

Web browser and version

No response

Actual Behavior

The positioning of the CookieConsent is always fine when it is visible, as we use bottom: 0 for this.

When it's hidden we use bottom: -300px (in rem). Moving the bottom down by exactly 300px will hide the banner if the banner is >= 300px. This is almost always true, even on the vast majority of mobile devices. But using fixed numeric positions is prone to edge case bugs. On a very narrow screen the banner can be taller than 300px due to text wrapping. In that case, part of the banner will always be visible and it's impossible to remove this visible part.

Expected Behavior

I expect it to be completely hidden regardless of screen size.

Steps to reproduce

Steps:

1. Open the web app
2. Shrink the window

[lindapaiste]

The solution is for the transition property to be a percentage-based transform rather than transitioning the bottom.

@dewanshDT this is such an edge case that I'm just gonna fix it myself if that's cool with you.

[madtitan02]

is this issue still open???

[lindapaiste]

@madtitan02 We do not need any help for this issue as it has been fixed by the linked PR #2337. The issue will remain open until that PR is approved and merged.