fix: login button overlap issue

[irfanfaraaz]

---

name: Pull request
about: Create a pull request
title: fix: Login Button Overlaps on Search Bar''
labels: bugs, help wanted ''
assignees: @irfanfaraaz''

---

What type of PR is this?(check all applicable)

• refactor
• feature
• bug fix
• documentation
• optimization
• other

Description

Initially, there was an issue where the login button and the search bar were overlapping. I have resolved this, and there is no longer any overlap between the login button and the search bar. The user interface is now improved, ensuring a seamless and visually appealing experience.

Related Issues

Issue #985

What this PR achieves

fixes: login button overlap issue

Screenshots, recordings

Before:

---

After:

---

Notes

[vercel]

@irfanfaraaz is attempting to deploy a commit to the openbeta-dev Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
open-tacos	✅ Ready (Inspect)	Visit Preview	Oct 6, 2023 8:27pm

[vnugent]

@irfanfaraaz thanks for the PR. While negative margin works I think it's a bit of a hack. I'd change the behavior of the parent container.

• Currently, the parent div has 3 equal width columns using css grid
• Since the right most cell can't accommodate all the menu items, let's get rid of grid and use flex box instead. Remove all classes with the md prefix, eg: 'md:grid md:grid md:grid-cols-3 md:auto-cols-max'
• Add justify-between https://tailwindcss.com/docs/justify-content#space-between

Can you try that way to see if it works?

Parent container: https://github.com/OpenBeta/open-tacos/blob/develop/src/components/ui/Bar.tsx#L53

[irfanfaraaz]

Thanks for the feedback! I've made the requested changes, let me know if it aligns with what you had in mind.

[irfanfaraaz]

Done

[vnugent]

@all-contributors add @irfanfaraaz for code

[allcontributors]

@vnugent

I've put up a pull request to add @irfanfaraaz! 🎉