use :has selectors for search input

This commit is contained in:
Pete Matsyburka
2026-07-23 11:13:10 +03:00
parent 48d595ca81
commit d05e125fa9
10 changed files with 26 additions and 57 deletions
@@ -6,11 +6,11 @@
<% end %>
</div>
<div class="flex flex-col md:flex-row md:items-center mb-4 gap-3">
<div class="flex w-full justify-between items-center">
<div>
<div class="group/header flex w-full justify-between items-center">
<div class="max-md:group-has-[search-input:focus-within]/header:hidden">
<h1 class="text-2xl md:text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>"><%= t('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>
</div>
<div class="max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
<div class="max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
<% if params[:q].present? || @pagy.pages > 1 || filter_params.present? %>
<%= render 'shared/search_input', placeholder: "#{t('search')}..." %>
<% end %>