Drop Down Accordion Header Wrapping on Mobile

I have created an accordion using the Webflow dropdown. It works great, but the header of the accordion does not wrap when the viewport shrinks. On mobile, the header does not wrap and just goes off the page. I tried adding

<style> .w-dropdown-toggle { white-space: normal; } </style>

and it does wrap the title, but it squishes the toggle icon(plus sign) when there is not enough space. Is there a better solution for wrapping/fitting the heading in the accordion? Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/scotts-site-e4dfb5?utm_medium=preview_link&utm_source=designer&utm_content=scotts-site-e4dfb5&preview=c30c7d0f0da7cce45e2cd53635982ec3&pageId=67a64a893a306acb80a2a9ff&itemId=67a67f64ce356e9696276b38&locale=en&workflow=preview

You can try different text breaks and wrap settings as shown below