Make the Web App Responsive

[priyavratamohan]

Describe the bug On mobile and tablet devices, the form fields and invoice preview overlap, making it difficult to fill in the invoice details or view the preview. The layout isn't responsive, causing elements to stack or display incorrectly on smaller screens.

To Reproduce Steps to reproduce the behavior:

1. Go to the Web App
2. Change viewport width to that of a Phone and a Tablet
3. Observe the elements overlapping each other.

Expected behavior The form and invoice preview should be displayed in separate, well-organized sections that adjust to different screen sizes. On smaller devices, elements should stack vertically or in a way that prevents overlap, ensuring the form fields remain accessible, and the invoice preview is clearly visible.

Screenshots

Mobile

Tablet

Smartphone:

• Device: iPhone 11 Pro
• OS: iOS 14.6
• Browser : Firefox

Tablet:

• Device: iPad
• OS: iPadOS 14.7.1
• Browser : Firefox

[priyavratamohan]

I would like to start working on it for Hacktoberfest 2024, could you assign applicable labels for it and assign me this issue?

Thanks a lot!

[ypratham]

@priyavratamohan Sure!