Search icon and text overlapping issue.

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.

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

While testing on Firefox 130.0.1 on linux, I noticed that there are alignment issues on all screen sizes.
On chrome alignment is ok.

The alignment is different because the height of the input is different.
The problem seems to be caused by css that styles#admin-toolbar-search-input.
The input inherits height: 100%; from admin.toolbar_search.css in admin_toolbar module which is interpreted differently in the two browsers.
If it gets overwritten in gin theme the problem if fixed (either by height: 30px of max-height: 30px).
It can be done in toolbar.scss in gin theme since the id styles overwrites are placed there.

Hi Djsagar and Iro,

I have fixed this issue and checked on both Chrome and Mozilla browsers kindly check the attached patch file and check after applying at your end.

Thanks

@amitnar I just checked your patch and I didn't encounter any issues on chrome nor firefox.

created MR for the fix

Hello, I'll review this one.

@selfirian,

my code MR already done by "saurav-drupal-dev". kindly check and confirm if anything to do by my end.

thnx

amitnar → changed the visibility of the branch 3379974-search-icon-is to hidden.

@selfirian,

I have rechecked and found that the MR raised by "saurav-drupal-dev" was conflicted. So I have again created MR for this so kindly check and confirm if there is anything to do by my end.

thnx

Hello, I still have an issue after applying the MR!517

But only for the .gin--classic-toolbar.

All the other variants of the toolbar are ok.

See enclosed image.

I think that this would be a better way to write your scss.

body:not(.gin--classic-toolbar) {
  #admin-toolbar-search-tab {
    .form-item{
      &::before {
        left: 70px;
        top: 50%;
        transform: translateY(-50%);
        @media (min-width: 21.5em) and (max-width: 58.25em) {
          top: 45px;
          transform: translateY(-13px);
          left: 10px;
        }
      }
      input{
        height:30px
      }
    }
  }
}

selfirian → changed the visibility of the branch 3379974-search-icon-issue-3379974 to hidden.

selfirian → changed the visibility of the branch 3379974-search-icon-issue-3379974 to active.

Hello,
I've installed the gin module, followed by enabling the admin toolbar search module. Configured admin toolbar search module by activating the display the search input as menu item in /admin/config/user-interface/admin-toolbar-search-settings and setting the gin theme navigation to Legacy, Classic Drupal Toolbar. I found the overlapping issue on clicking the search bar in Chrome and the mentioned issue in comment #24 🐛 Search icon and text overlapping issue. Active in Firefox. I applied the MR!517, which applied cleanly. Checked the overlapping issue in Chrome and Firefox browser, the alignment is rectified for Desktop and other devices in both the browsers. For the comment in #35 🐛 Search icon and text overlapping issue. Active , I acknowledge that the issue is only for the gin classic-toolbar but as per my findings, the classic_toolbar.css file is attached whenever the navigation is configured to Legacy, Classic Drupal Toolbar in /admin/appearance/settings/gin page using the library gin/gin_classic_toolbar. Additionally, this library contains this file and toolbar.css for styling purpose. The remaining toolbar works correctly without getting affected by this file. Hence wrapping it within body:not(.gin--classic-toolbar) is not required in my opinion. Including ss for reference. Not quite sure about the ss provided by @selfirian in #37 🐛 Search icon and text overlapping issue. Active , cause I didn't face such a issue.
Therefore moving to RTBC as the mentioned issue is resolved. Thanks

Is this outdated or does this still apply?

If yes, I've left some question in the code 👀