Are the non-minimized jscript files' source available?

[lat9]

I've got an issue with a client's site where the instantSearchInputWrapper div added via the jscript addition isn't including the search's submit button, so the display (on a responsive-classic clone) goes wonky at smaller display sizes:

Since the "Search" button isn't included in that wrapping div, the button's displayed on the next line.

[marco-pm]

JS is built from the react code here: https://github.com/marco-pm/zencart_instantsearch/blob/main/src/instant_search_dropdown.tsx

From the problem description there could be some HTML and/or CSS layout customization in the theme that doesn't play well with the instant search JS.

[lat9]

The site's using a standard (zc158) version of /includes/templates/template_default/sideboxes/tpl_search_header.php ... and I'm not versed in react.

Is there a reason why the added wrapping-div includes only the search input field and not the associated "Search" button?

[marco-pm]

It's been a while so I don't remember the exact reason, but I think the aim was to manipulate as few elements on the page as possible, especially buttons. I also think it's because it has to do with the way the results dropdown is displayed, and having the button inside the wrapper could cause issues.

Anyway, you can still have the button on the same line with some CSS, like:

form[name="quick_find_header"] {
  display: flex;
  align-items: center;
}

.instantSearchInputWrapper {
  flex: 1;
}

.instantSearchInputWrapper input[name="keyword"] {
  width: 100% !important;
}