Sign-up flow confirmation page has overflow

[AmasiaNalbandian]

What happened:
There is overflow in the confirmation page for the sign-up flow

What should have happened:
Remove the overflow or handle it.

How to reproduce it (as precise as possible):
Complete sign up link and get to the confirmation page.

[cypersii]

Shall i work on this issue?

[humphd]

By all means, @cypersii.

[sirinoks]

To make this issue hacktoberfest ready, the following needs to be improved:

• Where is this page/issue located? (link on the website; location in the code)
• Clean up issue text

[AmasiaNalbandian]

To make this issue hacktoberfest ready, the following needs to be improved:

• Where is this page/issue located? (link on the website; location in the code)
• Clean up issue text

The file to change can be found here:
https://github.com/Seneca-CDOT/telescope/blob/master/src/web/app/src/components/SignUp/Forms/Review.tsx

[DiegoHdz7]

Hi, I would like to take this issue for the hacktoberfest, can I take it?

[humphd]

@DiegoHdz7 sure, go for it.

[cychu42]

Hello, it seems no one is working on this issue. May I take it?

[manekenpix]

@cychu42 all yours!

[cychu42]

I managed to find that the long RSS URL at the bottom is the culprit, so I added word-break: 'break-word' to the CSS for blogRSS class div, which solves the overflow issue presented.

However, I found another issue while testing. I'm not sure how to make the container class div(the one with blue background) auto adjust in case the user wants to add more than 1 of those long RSS. As you can see in the picture below, a second Twitch URL would overlap with the buttons.

I can just set the height to bigger...but I doubt it’s a good solution.

[humphd]

cc @PedroFonsecaDEV. Maybe we should use trailing ellipses ... to shorten it, and show the whole thing on hover?

[cychu42]

My first thought was making a scrollable box, but the ellipses and hover idea would look way better.
I can try to implement the idea and make a PR for further review.