Need to design the login form looks broken

From tomorrow, I will start working on this issue.

Made the input field inside the form so that there is no horizontal scroll bar and the form is responsive.
https://git.drupalcode.org/project/picked_fresh/-/merge_requests/10
Here is a screenshot I am attaching for reference.

Hi @Tanushree Gupta,
After applying your patch the horizontal scrollbar issue is resolved, but I can see other several style breaks in the login page.
It'll be great if we can address them in this issue as well.
On small viewports as that of iPhone15 or so the search block is overlapping with nav tabs, we can make it responsive, in my opinion all the tabs and buttons can have a little bit more padding, otherwise it looks to be too shrunken.
Btw, I cannot see any placeholder or labels on the form, it should be there to make the theme more accessible to assistive technologies like screen-readers. I'd prefer a placeholder over label, just a personal preference though!
On smaller viewports the field names are coming as horizontally centered whereas on desktop view its left aligned, so I think we should follow the same for smaller viewports as well to maintain cohesiveness through out the design.
Attaching relevant screenshots for reference!

Here is the commit-id: https://git.drupalcode.org/project/picked_fresh/-/merge_requests/10/diff...
I have styled the login form, and in addition to this, I have solved the issue of the search block overlapping the menus. I also noticed that the primary tabs are a block, and I believe we can change their position through the block layout.

Hi,
Applied MR!10, the login form looks good for all dimensions and the search block overlapping the menus issue is also resolved.
Attaching screenshots for reference.

Hello @Tanushree Gupta,
I've checked your latest changes and on applying the patch though the tab styling and form styling looks good now, but I found other problems also, which I think goes beyond the scope of the issue.
As far as this issue is concerned, most the things have been addressed well, and you're correct that we can manipulate the placement of blocks through UI itself!
But a small issue seems to be there in terms of styling, which might not be possible to fix through UI, and need some code changes.

When placing 'Site Branding' and 'Primary Tabs' block on the Header region its showing closely packed, we can turn it into a flexbox display and provide a breathing space!

Attaching a screenshot for quick reference!

I am unable to find this issue in my site.
Here is a screenshot I am attaching for the reference.