Search icon is overlapping with the search text.

I created patch for above issue, please review and share your feedback.

Thanks!

I followed the steps provided by @djsagar and was able to reproduce the issue. After that, I applied patch #2, which resolved the problem. However, on mobile and iPad screens, I noticed that the search icon is slightly elevated and not centred properly. To address this, I’ve created a patch that resolves this specific issue.
Thank You

I have encountered this problem while testing in Drupal 9.5.x.
Unfortunately, the patch did not apply successfully in my case.
Resulting in the following errors:

error: patch failed: dist/css/components/toolbar.css:784
error: dist/css/components/toolbar.css: patch does not apply
error: patch failed: styles/components/toolbar.scss:628
error: styles/components/toolbar.scss: patch does not apply

Thank you.

Hello,
I also tried to apply patch from #3 in Drupal10.1 but it had some error. So I created a new patch for icon overlapping issue in all the devices and changed the color of search icon in admin toolbar as well. Please review.
Thanks

Applied #3 patch and it is cleanly applied and resolved the issue as well on both the screens (Desktop and mobile) but on the mobile screen there is a minor icon alignment issue still exists.

Minor Alignment issue on mobile

Desktop screen after patch

Mobile screen after patch

To fix the alignment issue update this CSS -

@media (max-width: 60.99em)
#toolbar-item-administration-search-tray nav .js-form-type-search::before {
    top: 18px;
}

updating tag so moving NW.

Tested with the patch - 3379974-3.patch . The issue is resolved in desktop , But bit misaligned in mobile and tablet . Same as raised by @ShwetaSharma. So moving it to Need Work.

Testing steps :

• Install gin theme
• Install Admin tool bar module
• Go to the theme settings and in Navigation (Drupal Toolbar) choose Legacy, Classic Drupal Toolbar
• Go to admin/config/user-interface/admin-toolbar-search-settings
• Activated Display the search input as a menu item.
• Click on search bar

Hi @divya.sejekan please share before and after screen shorts for reference if you tested this issue.

Let's wait for the maintainer review so moving NR.

Removing tag as screenshots are added now in #13

Tested with the patch - 3379974-5patch. The issue is resolved on desktop and mobile. This is good to go. Please check the screenshots.

Testing steps:

1. Install the Gin theme.
2. Install the Admin Toolbar module.
3. Go to the theme settings and navigate to Navigation (Drupal Toolbar), then choose Legacy or Classic Drupal Toolbar.
4. Proceed to admin/config/user-interface/admin-toolbar-search-settings.
5. Activate "Display the search input as a menu item."
6. Click on the search bar.

Removing tag as tested and added screenshots in #16. moving to RTBC.

Can we get a working MR here? TY in advance

@saschaeggi Kindly review.

ahsannazir → made their first commit to this issue’s fork.

Hi
I've tested MR !400 on Drupal version 10.0.1
MR applied Successfully.....

The Search icon and text not overlapping.

Adding screenshots for reference

Keeping in "needs review" for code verification