fix header dropdown

This commit is contained in:
kbe
2025-08-28 17:03:48 +02:00
parent 784d5158b4
commit 1989cbf6af
8 changed files with 186 additions and 207 deletions

View File

@@ -1,25 +1,21 @@
<% flash.each do |type, message| %>
<% if message.present? %>
<div class="rounded-md bg-green-50 border-green-100 p-4 border <%= flash_class(type) %> animate-fade-in" data-controller="flash-message">
<div class="flex">
<div class="shrink-0">
<%= flash_icon(type) %>
</div>
<div class="ml-3 w-full">
<div class="space-y-2">
<div class="text-sm text-green-700">
<p class="text-sm font-medium"><%= message %></p>
</div>
<% if flash.any? %>
<div class="flash-messages-container" style="position: relative; width: 100%; display: flex; justify-content: center; padding: var(--space-4); margin-top: var(--space-4);">
<div style="width: 100%; max-width: 600px;">
<% flash.each do |type, message| %>
<div class="notification <%= flash_class(type) %>"
data-controller="flash-message"
style="display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); margin-bottom: var(--space-3); font-weight: 500; width: 100%; box-sizing: border-box;">
<div class="notification-icon" style="display: flex; align-items: center; flex-shrink: 0;">
<%= flash_icon(type) %>
</div>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="click->flash-message#close" class="inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
<span style="flex: 1;"><%= message %></span>
<button data-action="click->flash-message#close"
style="background: none; border: none; cursor: pointer; padding: var(--space-1); color: inherit; opacity: 0.7; transition: opacity 0.2s;">
<i data-lucide="x" style="width: 16px; height: 16px;"></i>
</button>
</div>
</div>
<% end %>
</div>
<% end %>
<% end %>
</div>
<% end %>