app/components/spina/user_interface/header_component.html.erb
<div class="relative">
<!-- White bg header -->
<div class="bg-white border-b border-gray-200 p-4 md:p-6 md:pl-8 sticky top-0 z-20">
<div class="flex flex-col md:flex-row justify-between md:items-center">
<div class="text-2xl font-normal text-gray-700 flex items-center ">
<%= helpers.render_breadcrumbs separator: helpers.heroicon('chevron-right', style: :solid, class: "w-5 h-5 mx-2 text-gray-300") %>
<!-- Optional content after breadcrumbs -->
<%= after_breadcrumbs %>
</div>
</div>
<!-- Optional navigation -->
<%= navigation %>
</div>
<div class="flex space-x-3 p-4 py-6 z-20 md:absolute top-0 right-0 md:-top-0.5 md:right-0 h-md:full w-full md:w-auto items-start md:pr-8 justify-end">
<%= actions %>
</div>
</div>