Bug: Green header is not positioned correctly in the widget

[jonathan-lgtm]

Hi, 👋

I've been using the component in my project and I found an issue with the positioning of the green header. The header appears below where it should be, which affects the appearance and functionality of the widget.

<FloatingWhatsApp accountName="Example Name" phoneNumber="+12345678911" statusMessage="Tiempo de respuesta 5 minutos" placeholder="Escribe un mensaje" chatMessage="Hello, how can I help you?" notification={true} notificationSound={true} />

Note that the green header is not positioned correctly and appears below the chat content.

Expected behavior:
The green header should be at the top of the widget, with the chat content below it.

Current behavior:
The green header appears on top of the chat content, making the widget look cluttered and not working as expected.

I've tried overriding the styles using styled-components, but the problem persists.

Screenshots:
Here's a screenshot showing the problem:

[TvMaia]

I saw on mobile that it doesnt fit on screen either. I will fix it and PR it tonight.

[AdarshHatkar]

Hey @jonathan-lgtm @TvMaia ,
I noticed the original package seems a bit unmaintained.

I’ve created and been actively maintaining a fork under @dxkit-org/react-floating-whatsapp
, which I’m already using across multiple projects. 🚀

Would love for you to check it out, try it in your projects, and share feedback or ideas for improvements. Contributions are always welcome! 💡✨