検索ボタンを押すと出現する検索窓が壊れている

[uf2]

<details-modal class="header__search">
  <details>
    <summary
      class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
      aria-haspopup="dialog"
      aria-label="{{ 'general.search.search' | t }}"
    >
      <span>
        <span class="svg-wrapper">
          {{- 'icon-search.svg' | inline_asset_content -}}
        </span>
        <span class="svg-wrapper header__icon-close">
          {{- 'icon-close.svg' | inline_asset_content -}}
        </span>
      </span>
    </summary>

    <style>
      
   
    <div
      class="search-modal modal__content gradient"
      role="dialog"
      aria-modal="true"
      aria-label="{{ 'general.search.search' | t }}"
    >
      <div class="modal-overlay"></div>
      <div
        class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}"
        tabindex="-1"
      >
        {%- if settings.predictive_search_enabled -%}
          <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
        {%- else -%}
          <search-form class="search-modal__form">
        {%- endif -%}
        <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
          <div class="field">
            <input
              class="search__input field__input"
              id="{{ input_id }}"
              type="search"
              name="q"
              value="{{ search.terms | escape }}"
              placeholder="{{ 'general.search.search' | t }}"
              {%- if settings.predictive_search_enabled -%}
                role="combobox"
                aria-expanded="false"
                aria-owns="predictive-search-results"
                aria-controls="predictive-search-results"
                aria-haspopup="listbox"
                aria-autocomplete="list"
                autocorrect="off"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
              {%- endif -%}
            >
            <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
            <input type="hidden" name="options[prefix]" value="last">
            <button
              type="reset"
              class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
              aria-label="{{ 'general.search.reset' | t }}"
            >
              <span class="svg-wrapper">
                {{- 'icon-reset.svg' | inline_asset_content -}}
              </span>
            </button>
            <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
              <span class="svg-wrapper">
                {{- 'icon-search.svg' | inline_asset_content -}}
              </span>
            </button>
          </div>

          {%- if settings.predictive_search_enabled -%}
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
              {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
            </div>

            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          {%- endif -%}
        </form>
        {%- if settings.predictive_search_enabled -%}
          </predictive-search>
        {%- else -%}
          </search-form>
        {%- endif -%}
        <button
          type="button"
          class="search-modal__close-button modal__close-button link link--text focus-inset"
          aria-label="{{ 'accessibility.close' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-close.svg' | inline_asset_content -}}
          </span>
        </button>
      </div>
    </div>
  </details>
</details-modal>

テーマはDAWNを使用しています。

虫眼鏡のマークを選択すると、検索窓が出現するようになっているのですが、

この検索窓がヘッダーのほかの要素の上に出現し、文字などがかぶった状態で出てしまいます。

また、検索窓を閉じるための「×」ボタンも２つ出現しています。

バージョンは15を使用しています。どなたか解決方法をご存知の方がいらっしゃいましたら

ご教示いただけますと幸いです。

[Qcoltd · Accepted solution]

@uf2 様

問題があるとすると、貼っていただいたHTMLではなく、CSSの方ではないかと思います。

しかし、CSSを記載いただいたとしても、その情報から何が問題かを見つけるのは難しいのではないかと思います。

開発パートナーがいらっしゃるようでしたら、そちらに相談するのがおすすめですが、

もしいらっしゃらないようなら、プライベートメッセージでやりとりさせていただいて、

問題が発生しているページを実際に拝見できれば、

具体的な解決策をご提示できる可能性があります。

(解決のお約束はできませんが。)

ご参考まで。

(キュー田辺)

[uf2]

株式会社Q

田辺様

ご確認いただきありがとうございます。

フロント部分はほかにも修正したいと思っていた箇所があったため、これを機にオリジナルのDAWNテーマを再度

反映させることにいたしました…！

ご親切にご回答いただきありがとうございました。