fix: Filter toggle button & Search field style updated in responsive device

[iamibrahimriaz]

PR Type

What kind of change does this PR introduce?

• Bugfix
• Security fix
• Improvement
• New Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• Text changes
• Other... Please describe:

Description

Disabling the Listing header no longer hides the sidebar toggle button in responsive view, since the toggler has been moved outside the header section.

Before: https://prnt.sc/CjtoJuSjP2VW | https://prnt.sc/NYsKsz-wQ4Yf

After: https://prnt.sc/pChmYOLX2l2t , https://prnt.sc/m7EGu-wqusME

Also updated the responsive media breakpoint from 991px to 767px. https://prnt.sc/yxZcHnc5lMSP

Any linked issues

Fixes #

Checklist

• My code follows the WordPress coding standards

[gaa23]

It looks way better inside the header when the header is enabled, when its enabled can it nest nicely with the other icons?

[RabbiIslamRony]

@iamibrahimriaz Please add a listing shortcode and Gutenberg block on a same page (https://imgur.com/HqTVQhA
). Then set Gutenberg block sidebar to “no sidebar” and enable the filter button (https://imgur.com/Yh2VitR
). The filter button is not working properly conditionally in the Gutenberg block (https://imgur.com/RrsBBK8
).

[iamibrahimriaz]

It looks way better inside the header when the header is enabled, when its enabled can it nest nicely with the other icons?

@gaa23 The filter toggle button should be separate from the header because the header is an individual module.

[iamibrahimriaz]

@iamibrahimriaz Please add a listing shortcode and Gutenberg block on a same page (https://imgur.com/HqTVQhA ). Then set Gutenberg block sidebar to “no sidebar” and enable the filter button (https://imgur.com/Yh2VitR ). The filter button is not working properly conditionally in the Gutenberg block (https://imgur.com/RrsBBK8 ).

Fixed

[RabbiIslamRony]

@iamibrahimriaz The header is still visible in the responsive view even when it’s disabled, so it’s not working as described (Guteberg block)

[RabbiIslamRony]

@iamibrahimriaz When the sidebar is set to popup filter and the filter button is enabled, it doesn’t appear on the frontend (likely already present in the development branch — adjustment needed to complete this PR). https://prnt.sc/-E4KZKBJKsQs

[iamibrahimriaz]

@RabbiIslamRony its need to fix on another PR. This PR is only for sidebar filter toggle button in responsive device. It will be great, if you create an issue in details.

[RabbiIslamRony]

@iamibrahimriaz During investigation, the previous responsive breakpoint was 991px. After fixing the filter toggler button, it is now 767px — please note that the responsive media breakpoint has been changed.

[iamibrahimriaz]

@RabbiIslamRony Breakpoint was intentionally changed after discussion with the CPO.

[RabbiIslamRony]

@iamibrahimriaz Clicking “Select” in the search area causes the sidebar to hide automatically. https://prnt.sc/XR5LLqejsgcy

[iamibrahimriaz]

@iamibrahimriaz Clicking “Select” in the search area causes the sidebar to hide automatically. https://prnt.sc/XR5LLqejsgcy

It's not related to this PR. Need another PR to fix this issue.