Added responsive and mobile friendly UI changes

[vijayvcm]

The current bootstrap UI design is not so mobile-friendly. Added some CSS and changed UI styles to support both desktop and mobile devices

Unfortunately, I have some issues with my laptop on FFmpeg. It shows an error when I run it with localhost.

metube-tablet.mp4

metube-desktop.mp4

metube-mobile.mp4

[alexta69]

Hi @vijayvcm ,
Thanks for the PR. I see that it changes the UI to be much less compact, which I think is not for the best. Let's keep the compact layout - the Add button alongside the options, and the advanced options in a drop-down under the Add button.

[vijayvcm]

Hi @alexta69,

Could you clarify what you mean by 'compact layout'? I'm having trouble understanding it.

Do you prefer keeping the old 'Add' dropdown button instead of implementing advanced options?

Is this preference specific to certain screens or devices?

Could you provide more details on areas needing improvement?

Regarding the separation of the download folder and custom name prefix: The download folder path is often too long and doesn't fit well into the button dropdown area. That's the reason I separated it.

[alexta69]

Sorry for the delay in response.
The current layout is compact, in that there are only two rows (the URL and the options + add button). I wouldn't want to expand it to four rows.
On smaller screens, it currently unfolds into five rows, which is also fine. The only issue is with the Add dropdown in this case -- it overflows the screen and doesn't adapt to its size. This is the only problem that needs fixing, IMHO..