telescope
telescope copied to clipboard
Seneca-CDOT
Sign-up flow confirmation page has overflow
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.
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~~
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
Hi, I would like to take this issue for the hacktoberfest, can I take it?
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.
cc @PedroFonsecaDEV. Maybe we should use trailing ellipses ... to shorten it, and show the whole thing on hover?
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.