Improve mobile responsiveness

app/views/components/_breadcrumb.html.erb

@@ -6,26 +6,41 @@
 <%# ] %>
 
 <!-- Breadcrumb -->
-<nav class="inline-flex items-center gap-2 bg-white px-4 py-3 rounded-xl shadow-sm border border-gray-100 mb-8" aria-label="Breadcrumb">
+<nav class="w-full bg-white px-3 sm:px-4 py-3 rounded-xl shadow-sm border border-gray-100 mb-6 sm:mb-8 overflow-hidden" aria-label="Breadcrumb">
+  <div class="flex items-center gap-1 sm:gap-2 min-w-0">
     <% crumbs.each_with_index do |crumb, index| %>
       <% if crumb[:path].present? %>
         <%# Crumb with link %>
-      <%= link_to crumb[:path], class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors duration-200" do %>
+        <%= link_to crumb[:path], class: "inline-flex items-center text-xs sm:text-sm font-medium text-gray-700 hover:text-primary-600 transition-colors duration-200 flex-shrink-0" do %>
           <% if index == 0 %>
-          <i data-lucide="home" class="w-4 h-4 mr-2"></i>
+            <i data-lucide="home" class="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0"></i>
           <% end %>
+          <span class="<%= 'hidden sm:inline' if index > 0 && index < crumbs.length - 2 %>">
             <%= crumb[:name] %>
+          </span>
         <% end %>
       <% else %>
         <%# Current page (no link) %>
-      <span class="text-sm font-medium text-primary-600 truncate max-w-xs" aria-current="page">
+        <span class="text-xs sm:text-sm font-medium text-primary-600 truncate min-w-0 flex-1" aria-current="page">
           <%= crumb[:name] %>
         </span>
       <% end %>
 
       <%# Separator (except for the last item) %>
       <% if index < crumbs.length - 1 %>
-      <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
+        <% if index == 0 || index >= crumbs.length - 2 %>
+          <i data-lucide="chevron-right" class="w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0"></i>
+        <% else %>
+          <span class="hidden sm:inline">
+            <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400 flex-shrink-0"></i>
+          </span>
         <% end %>
       <% end %>
+    <% end %>
+
+    <%# Show ellipsis on mobile when there are more than 3 items %>
+    <% if crumbs.length > 3 %>
+      <span class="text-gray-400 text-xs font-medium sm:hidden flex-shrink-0">...</span>
+    <% end %>
+  </div>
 </nav>

app/views/orders/new.html.erb

@@ -1,5 +1,5 @@
 <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
-  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <%= render 'components/breadcrumb', crumbs: [
       { name: 'Accueil', path: root_path },
       { name: 'Événements', path: events_path },

app/views/promoter/ticket_types/show.html.erb

@@ -3,25 +3,25 @@
 <div class="container py-8">
   <!-- Header with actions -->
   <div class="mb-8">
-    <div class="flex items-center justify-between">
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
       <div class="flex items-center space-x-4">
         <%= link_to promoter_event_ticket_types_path(@event), class: "text-gray-400 hover:text-gray-600 transition-colors" do %>
           <i data-lucide="arrow-left" class="w-5 h-5"></i>
         <% end %>
         <div>
-          <h1 class="text-3xl font-bold text-gray-900 mb-2"><%= @ticket_type.name %></h1>
+          <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2"><%= @ticket_type.name %></h1>
           <p class="text-gray-600">
             <%= link_to @event.name, promoter_event_path(@event), class: "text-purple-600 hover:text-purple-800" %>
           </p>
         </div>
       </div>
-      <div class="flex items-center space-x-3">
+      <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
-        <%= link_to edit_promoter_event_ticket_type_path(@event, @ticket_type), class: "inline-flex items-center px-4 py-2 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors duration-200" do %>
+        <%= link_to edit_promoter_event_ticket_type_path(@event, @ticket_type), class: "w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors duration-200" do %>
           <i data-lucide="edit" class="w-4 h-4 mr-2"></i>
           Modifier
         <% end %>
 
-        <%= button_to duplicate_promoter_event_ticket_type_path(@event, @ticket_type), method: :post, class: "inline-flex items-center px-4 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors duration-200" do %>
+        <%= button_to duplicate_promoter_event_ticket_type_path(@event, @ticket_type), method: :post, class: "w-full inline-flex items-center justify-center px-4 py-2 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors duration-200" do %>
           <i data-lucide="copy" class="w-4 h-4 mr-2"></i>
           Dupliquer
         <% end %>
@@ -209,7 +209,7 @@
                 data: { confirm: "Êtes-vous sûr de vouloir supprimer ce type de billet ? Cette action est irréversible." },
                 class: "w-full inline-flex items-center px-4 py-2 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors duration-200" do %>
               <i data-lucide="trash-2" class="w-4 h-4 mr-2"></i>
-              Supprimer le type
+              Supprimer le type de billet
             <% end %>
           <% else %>
             <div class="w-full inline-flex items-center px-4 py-2 text-gray-400 font-medium rounded-lg cursor-not-allowed">