div id="chatbot" height exceeds window height on desktop in turn hiding close button
Closed this issue · 2 comments
Hello,
A job application I made today on desktop was met with the chatbot popup which first asked for a cover letter and then upon reply confirmed my submission. I noticed that the chatbot div was set to a height of 500px when @media screen and (min-width: 1008px) as shown in the screenshot below:
As shown, the close icon ("X") on the chatbot div was mostly hidden and thus not very perceptible because of the div's height. In Chrome with DevTools I set the max-height of div id="chatbot" to 80vh which in turn showed the close icon in full. Adding this attribute/value pair would prevent the top of this div from flowing off-screen in other instances for users with browser window heights less than ~485px (500px height - 15px bottom), example shown in screenshot below:
Just for fun (and as shown above) I duplicated the last aside class="animatable codi-container " element inside the chatbot div a few times to ensure that scrolling is preserved with this fix, and indeed it is.
Please let me know if you have any questions. @Jonki thank you for your response to the social icon clash that I brought to Nick's attention yesterday, the fix looks great. Have a nice day everyone, beautiful website.
-jcwii