From f0d32bf3f1f3b52967fdd9800458d477f7186ae4 Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Mon, 15 Sep 2025 19:06:15 +0200
Subject: [PATCH] Improve mobile responsiveness

---
 app/views/components/_breadcrumb.html.erb     | 51 ++++++++++++-------
 app/views/orders/new.html.erb                 |  6 +--
 app/views/promoter/ticket_types/show.html.erb | 24 ++++-----
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/app/views/components/_breadcrumb.html.erb b/app/views/components/_breadcrumb.html.erb
index 4f96a47..33683df 100644
--- a/app/views/components/_breadcrumb.html.erb
+++ b/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">
-  <% 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 %>
-        <% if index == 0 %>
-          <i data-lucide="home" class="w-4 h-4 mr-2"></i>
+<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-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-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-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 %>
+        <% 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 %>
-        <%= crumb[:name] %>
       <% end %>
-    <% else %>
-      <%# Current page (no link) %>
-      <span class="text-sm font-medium text-primary-600 truncate max-w-xs" 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>
+
+    <%# 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 %>
-  <% end %>
+  </div>
 </nav>
\ No newline at end of file
diff --git a/app/views/orders/new.html.erb b/app/views/orders/new.html.erb
index 6e72c7f..aae4aab 100644
--- a/app/views/orders/new.html.erb
+++ b/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 },
@@ -16,7 +16,7 @@
     <!-- Order Summary -->
     <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
       <h2 class="text-xl font-semibold text-gray-900 mb-4">Résumé de votre commande</h2>
-      
+
       <% if @event %>
         <div class="mb-6">
           <h3 class="text-lg font-medium text-gray-800"><%= @event.name %></h3>
@@ -114,4 +114,4 @@
       </div>
     <% end %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/promoter/ticket_types/show.html.erb b/app/views/promoter/ticket_types/show.html.erb
index 0599c43..82e0e40 100644
--- a/app/views/promoter/ticket_types/show.html.erb
+++ b/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">
-        <%= 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 %>
+      <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: "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 %>
@@ -159,7 +159,7 @@
             </div>
             <div class="text-sm text-gray-500">Prix unitaire</div>
           </div>
-          
+
           <div class="grid grid-cols-2 gap-4">
             <div class="text-center p-3 bg-gray-50 rounded-lg">
               <div class="text-2xl font-bold text-gray-900">
@@ -174,14 +174,14 @@
               <div class="text-xs text-gray-500">Restants</div>
             </div>
           </div>
-          
+
           <div class="text-center p-4 bg-green-50 rounded-lg">
             <div class="text-2xl font-bold text-green-600">
               <%= number_to_currency(@ticket_type.current_revenue, unit: "€") %>
             </div>
             <div class="text-sm text-gray-500">Revenus générés</div>
           </div>
-          
+
           <div class="text-center p-4 bg-blue-50 rounded-lg">
             <div class="text-2xl font-bold text-blue-600">
               <%= number_to_currency(@ticket_type.total_potential_revenue, unit: "€") %>
@@ -205,11 +205,11 @@
           <% end %>
           <hr class="border-gray-200">
           <% if @ticket_type.tickets.empty? %>
-            <%= button_to promoter_event_ticket_type_path(@event, @ticket_type), method: :delete, 
+            <%= button_to promoter_event_ticket_type_path(@event, @ticket_type), method: :delete,
                 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">
@@ -237,4 +237,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>