🐛 Bug Report: Misaligned Submit Button in Query Bar

[shelar1423]

📜 Description

the submit button in the query bar appears misaligned within its container. This misalignment affects the visual aesthetics and usability of the query bar.

👟 Reproduction steps

1. Navigate to the interface with the query bar and hover upon it.
2. Observe the submit button within the query bar.

👍 Expected behavior

The submit button should be perfectly centered and aligned within its circular container, ensuring a clean and user-friendly appearance.

👎 Actual Behavior with Screenshots

💻 Operating system

Windows

What browsers are you seeing the problem on?

Chrome

🤖 What development environment are you experiencing this bug on?

Docker

🔒 Did you set the correct environment variables in the right path? List the environment variable names (not values please!)

No response

📃 Provide any additional context for the Bug.

No response

📖 Relevant log output

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🔗 Are you willing to submit PR?

None

🧑‍⚖️ Code of Conduct

• I agree to follow this project's Code of Conduct

[sarthaklaptop]

Is this issue still open ?

for me the submit button is perfectly centered in laptop and mobile screen

[blackviking27]

This icon is perfectly aligned but visually it seems a little off. adding a little padding / margin on left and adjusting the icon width will center the icon visually which can be seen in the below diagram.

[shelar1423]

Is this issue still open ?

for me the submit button is perfectly centered in laptop and mobile screen

Yes it is open,you can try to make it a bit more aligned visually as it requires some padding

[nayelimdejesus]

Hi, I would like to work on this issue.

[utin-francis-peter]

@shelar1423 @blackviking27 Please have a look at the linked PR and share your thoughts.

Thank you.

[blackviking27]

@utin-francis-peter I looked at your css changes and would like to point out that the Icon still seems a little off. I added some of my css changes to visually align the icon to center. You can see the difference below

your css

adding only ml-[4px] h-6 classes to the img tag

I hope you can see the differences, You can implement these changes or try something new. Hope this helps

[utin-francis-peter]

The all mighty CSS at it again, lol.

@blackviking27 I've modified the styles using the highlighted classes. Pls have a look.

Thanks.

[blackviking27]

@utin-francis-peter Looks pretty good now. Don't see the need to add flex-shrink-0 and also p-4 would align better with border of the input text.

[chickenleaf]

@blackviking27 hello!! is this still up for grabs?