acme themes How to solve broken UI of the search bar with the current Acme Theme with latest IPS

[Focuslinks]

How to solve breaking the UI of the search bar with the current Acme Theme version posted here because of the improved UX in the latest version of the IPS.

Problem 

 

Solution:

Go to Admin Panel and Navigate to customization, select themes then go to your current  themes and select Edit HTML and CSS

 

 

 

 

then search for QIUCKSEARCH 

 

Then PASTE and replace with the code below

 

{{if !$preview and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'search' ) ) AND !\in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}
	<div id="elSearchWrapper">
		<div id='elSearch' data-controller="core.front.core.quickSearch">
			<form accept-charset='utf-8' action='{url="app=core&module=search&controller=search&do=quicksearch" seoTemplate="search" noprotocol="true"}' method='post'>
                <input type='search' id='elSearchField' placeholder='{lang="search_placeholder"}' name='q' autocomplete='off' aria-label='{lang="search"}'>
                <details class='cSearchFilter'>
                    <summary class='cSearchFilter__text'></summary>
                    <ul class='cSearchFilter__menu'>
                        {{$option = \IPS\Output::i()->defaultSearchOption;}}
                        <li><label><input type="radio" name="type" value="all" {{if \IPS\Output::i()->defaultSearchOption[0] == 'all'}} checked{{endif}}><span class='cSearchFilter__menuText'>{lang="everywhere"}</span></label></li>
                        {{if \count( output.contextualSearchOptions )}}
                            {{foreach array_reverse( output.contextualSearchOptions ) as $name => $data}}
                                <li><label><input type="radio" name="type" value='contextual_{expression="json_encode( $data )"}'{{if \IPS\Output::i()->defaultSearchOption[0] == $data['type']}} checked{{endif}}><span class='cSearchFilter__menuText'>{lang="$name"}</span></label></li>
                            {{endforeach}}
                        {{endif}}
                        {{foreach output.globalSearchMenuOptions() as $type => $name}}
                            <li><label><input type="radio" name="type" value="{$type}"{{if empty(\IPS\Output::i()->contextualSearchOptions) and \IPS\Output::i()->defaultSearchOption[0] == $type}} checked{{endif}}><span class='cSearchFilter__menuText'>{lang="$name"}</span></label></li>
                        {{endforeach}}
                    </ul>
                </details>
				<button class='cSearchSubmit' type="submit" aria-label='{lang="search"}'><i class="fa fa-search"></i></button>
			</form>
		</div>
	</div>
{{endif}}

then click SAVE 

Enjoy