Fix wrong position of search input on minimal when it does not fit in the space.

[Soare-Robert-Daniel]

Summary

By default, the search input is positioned on the left or the right of the search icon, depending on the position. The input popup might be partially offscreen if the search icon is in the middle of a position not too close to the edge.

To solve this, I added an extra step that rechecks if the search input fits. If not, I add an extra offset on the X-axis, which solves the offscreen bug. ℹ️ This is the solution with the least amount of code, which helps us to stay below the limit.

Tip

Create an alias for document.window to save space. The build does not do an aggressive optimization to do this step automatically.

Will affect visual aspect of the product

YES

Screenshots

Before

After

Test instructions

• Like in the issue, position the icon search near the middle and check in a small window.

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

Closes #4017

[Soare-Robert-Daniel]

@preda-bogdan @GrigoreMihai Since my solution adds new code, I am over the limit size. Do you see how I can make it fit the size limit (refactor some code, a smaller solution, trim some fat code elsewhere)?

I am still trying to figure out what else I can do.

[preda-bogdan]

@Soare-Robert-Daniel we can see if we have any refactor opportunities to reduce the size, also you can just emit an event and have an inline script added when the search input is being used that will recalculate that instead of being part of the dropdown script, just an ideea.

[pirate-bot]

Plugin build for c220012 is ready 🛎️!

• Download build

[irinelenache]

@Soare-Robert-Daniel Tested and the search input position issue is fixed now 👍

Regarding the other one, is it planned to be handled in a separate PR?

The search icon doesn't work when it's added in the mobile sidebar, no matter what open behaviour i'm using (minimal, canvas, float above header) https://vertis.d.pr/v/FS6RPv

[Soare-Robert-Daniel]

@irinelenache, I will handle the other part in a separate PR. It seams that the detection is broken and I believe it will require a refactor.

[pirate-bot]

🎉 This PR is included in version 3.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀