Remove white space at bottom of screen bug

[Turntabl-DorothyEwuah]

• Fixed white space above header and also below screen when you scroll bug. Fixes [Request] Remove white space at the bottom of the screen #542
• Made a few CSS fixes as well

[netlify]

✅ Deploy Preview for glistening-gecko-6b417a ready!

Name	Link
🔨 Latest commit	130f27b
🔍 Latest deploy log	https://app.netlify.com/sites/glistening-gecko-6b417a/deploys/656695477f52670008158a44
😎 Deploy Preview	https://deploy-preview-733--glistening-gecko-6b417a.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[aaronreed708]

Hi @Turntabl-DorothyEwuah, I'm unable to recreate this issue on main or dev. Can you please give me the recreation steps? I'm hesitant to review and approve your PR if I can't see that it fixes the issue. Thanks!

[Turntabl-DorothyEwuah]

Hi @aaronreed708 this bug seems to be browser specific. I found it difficult recreating it and almost wrote it off as fixed until I changed browsers and used Microsoft Edge instead. For some reason some elements are overflowing at the top and bottom when you scroll only when you use this browser. You should be able to recreate this is Microsoft Edge.

[aaronreed708]

@Turntabl-DorothyEwuah I tried this on Windows with Microsoft Edge Version 119.0.2151.72 (Official build) (64-bit) and still couldn't recreate. Here are my steps:

1. open https://try.a11y-theme-builder.finos.org/
2. Create a new design system
3. Add white color (#FFFFFF)
4. Click on Color Theme
5. I focus one of the labels on the page and scroll to top and bottom of the page
6. I focus the header on the page and try to scroll

I did not see the issue. Am I doing something wrong?

[Turntabl-DorothyEwuah]

Thank you @aaronreed708, for your efforts in testing the scrolling issue. I've re-examined the issue using the same link you provided and was able to reproduce it. To observe the issue, please use the touchpad to scroll to the extreme top or bottom of the page, as if trying to pull down the header or pull up the footer beyond their limits. This action should reveal the white space anomaly at the edge of the UI.

[aaronreed708]

@DorothyEwuah Sorry, not able to recreate on my wife's Windows using Edge.

@Chessel, @evangk6 can either of you recreate this issue? I don't want to review the PR if I can't recreate the issue. Thank you!

[Chessel]

@DorothyEwuah @aaronreed708 I don't have a Windows machine, but asked a co-worker to try to replicate the bug opening the site on Edge (version 119.0.2151.97-official build) and she didn't find the gap either... I'll try in my mom's computer when she's back from work.

[evangk6]

@aaronreed708 - we were able to recreate this issue during the meeting today on my machine. It only occurred in Edge when using the touch pad. If you are unable to recreate, you are welcome to assign the reviewer status to me for this one.

[aaronreed708]

@aaronreed708 - we were able to recreate this issue during the meeting today on my machine. It only occurred in Edge when using the touch pad. If you are unable to recreate, you are welcome to assign the reviewer status to me for this one.

Since I won't be back for another 5 days and I have no access to a Windows machine here, I'll assign the review to you, @evangk6. Thanks!

[evangk6]

Tested this out in the original scenario (edge with touchpad) and confirmed everything is fixed