Buttons in the website get misplaced and dropdown does not work in smaller screens.

[kishorliv]

Describe the issue
In the timetoleave.app website, I found few issues when the screen gets smaller:

• Intro buttons (Source code and Download) do not align properly.
• The text inside the buttons do not align centrally.
• The dropdown menu does not seem to work and is nearly invisible.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'timetoleave.app'
2. Resize the browser window

Screenshots

Is it okay if i fix these issues and open a PR?

[thamara]

@kishorliv Thanks for reporting and for wanting to work on it!
I have assigned this issue to you :)

[kishorliv]

Hey @thamara, I ran into an issue while running 'npm ci'. It actually changed package-lock.json without throwing any errors! Upon investigation, I found a similar issue here. My node version is 14.15.6 and npm version is 7.24.2.

The change in the file itself is nothing but coming from .editorconfig, an extra whitespace in the end and indent size of 4. I am not sure if this is specific to my workspace settings because .editorconfig file overrides user's workspace settings.

I think I might be missing something since no one seems to have encountered this issue. Please let me know if there's a way to solve this. Thanks.

[tupaschoal]

@kishorliv though the issue seems somewhat concerning, I couldn't understand whether it prevented you from running the app or the website and going after the issue, can you add more details, please?

[kishorliv]

@tupaschoal no the app runs fine. I started working on the issue yesterday so will probably send a PR by today.

[tupaschoal]

Nice!

[thamara]

I started reading why package-lock.json might get to be different, and it's related to how we specify our dependencies (using ^ for example). But I didn't went further, as this doesn't seem like a big issue.