Admin toolbar search positioning is broken

I don't even see this search bar on any of the CivicTheme sites I have access to!

It's a module available in govcms.

Hi, the admin toolbar search bar issue is encountered while using Civictheme 1.7.1 and the admin toolbar search is completely not showing while using Civictheme 1.8.1. I've created a patch for the issue fixes for the admin toolbar search is not aligned properly. I'm attaching the before and after screenshots for reference. Please review the patch.

Thank you for the patch - 1.8.1 has had a lot of changes to form elements and there seems to be some issues sprouting out of this. I will be looking into these over the next week.

@RichardGaunt, thanks for reviewing the patch. As I've mentioned that the admin_toolbar_search bar is completely not being rendered while using the Civictheme 1.8.1 this is because there's no input tag being rendered for search field only search label is present in the DOM structure.

<div id="admin-toolbar-search-tab" class="toolbar-tab">
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'form_element' -->
    <!-- FILE NAME SUGGESTIONS:
   * form-element--civictheme-field--search.html.twig
   x form-element--civictheme-field.html.twig
   * form-element.html.twig -->
    <!-- BEGIN OUTPUT from 'themes/contrib/civictheme/templates/form/form-element--civictheme-field.html.twig' -->
    <div class="ct-field ct-theme-light ct-field--search ct-field--vertical    js-form-item js-form-type-search">
        <label
            class="ct-label ct-theme-light ct-label--regular  ct-field__title ct-visually-hidden"
            for="admin-toolbar-search-input">
            Search </label>
        <div class="ct-field__wrapper">
        </div>
    </div>
    <!-- END OUTPUT from 'themes/contrib/civictheme/templates/form/form-element--civictheme-field.html.twig' -->
</div>

Search input tag is missing that's why the search bar is not rendered.
<input placeholder="Admin Toolbar quick search" accesskey="a" type="search" id="admin-toolbar-search-input" size="30" maxlength="128" class="form-search form-element form-element--type-search form-element--api-search ui-autocomplete-input" autocomplete="off">

In addition, the form-element directory is also not present in /civictheme/components/02-molecules/form-element/ directory for 1.8.1. These files are not available /civictheme/components/02-molecules/form-element/form-element.twig, /civictheme/components/02-molecules/form-element/form-element.scss and /civictheme/components/02-molecules/form-element/form-element.stories.js

Hi @tirupati_singh,
Thanks for the findings. Even I've faced the same issue and on investigation i'll report the same. On 1.8.1 onwards the admin toolbar search is not at all visible, but on 1.7.1 the toolbar is visible but positioning is not correct! On applying the patch the position of the admin toolbar search is getting fixed, however the styling seems to be a bit wrong. the input field is not taking full width of the same. So I was just thinking if we can address that over here as well! Also providing a MR will be preferable over a patch, so can you kindly covert the patch to an MR.
Attaching all the screenshots for reference.

Hi @sourojeetpaul, I've fixed the admin toolbar search styling issue and updated the previous patch for the same. I'm attaching the screenshots of the before and after fixes of the issue for your reference.

Thanks!

Hi @tirupati_singh,
Thanks for the prompt action. The patch is resolving the alignment issue of the quick search form of admin toolbar, though there are a few styling changes which will be good to have. I compared the styling with Bootstrap5's styling and noticed some differences, which caught my eye. On Civic theme the border of the form is bit large and placeholder text too seems to be a bit large. We're getting to see a green border on focus which IMO is not looking that great, I'm just thinking if we can address these small styling issues so that the quick search panel looks cohesive on different themes as well! Thus I'm moving this once again to NW.
Attaching screenshots for both the themes for easy reference!
P.S: The patch name should incorporate the comment number instead of demarcating it with 'updated' so it'll be easy to track the progressive enhancements.

@richardgaunt can you please read the latest comments here and provide any relevant updates, noting you mentioned form work in a previous comment. Thanks.

Hi @sourojeetpaul, updated the admin toolbar search design as per the provided feedback. Uploading the updated patch. Attaching the screenshot of the fixes for the issue for your reference.

Hi @tirupati_singh,
Thanks for working on the feedbacks! This looks better to me now. Though not sure why we're providing patches, raising MR is the recommended way!
Moving this forward to RTBC++