From c7831f5b863ee04c93dce48f6fff5f4bd0e7b1ae Mon Sep 17 00:00:00 2001
From: Khalid MOUTAOUAKIL <khalid.moutaouakil@sanef.fr>
Date: Mon, 6 Apr 2026 16:37:00 +0200
Subject: [PATCH] KPIs sur une seule ligne (flex-nowrap, min-width:0)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/templates/audit_full_list.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/templates/audit_full_list.html b/app/templates/audit_full_list.html
index 9813f3c..1bd61b7 100644
--- a/app/templates/audit_full_list.html
+++ b/app/templates/audit_full_list.html
@@ -25,26 +25,26 @@
 {% endif %}
 
 {% if kpis %}
-<div class="flex gap-3 mb-4">
-    <a href="/audit-full" class="card p-3 text-center flex-1 hover:bg-cyber-hover {% if not filter %}ring-1 ring-cyber-accent{% endif %}">
-        <div class="text-lg font-bold text-cyber-accent">{{ kpis.total }}</div>
+<div class="flex flex-nowrap gap-2 mb-4" style="display:flex;flex-wrap:nowrap;">
+    <a href="/audit-full" class="card p-2 text-center flex-1 hover:bg-cyber-hover {% if not filter %}ring-1 ring-cyber-accent{% endif %}" style="min-width:0">
+        <div class="text-base font-bold text-cyber-accent">{{ kpis.total }}</div>
         <div class="text-xs text-gray-500">Total</div>
     </a>
-    <a href="/audit-full?filter=reboot" class="card p-3 text-center flex-1 hover:bg-cyber-hover {% if filter == 'reboot' %}ring-1 ring-cyber-red{% endif %}">
-        <div class="text-lg font-bold {% if kpis.needs_reboot > 0 %}text-cyber-red{% else %}text-cyber-green{% endif %}">{{ kpis.needs_reboot }}</div>
-        <div class="text-xs text-gray-500">Reboot requis</div>
+    <a href="/audit-full?filter=reboot" class="card p-2 text-center flex-1 hover:bg-cyber-hover {% if filter == 'reboot' %}ring-1 ring-cyber-red{% endif %}" style="min-width:0">
+        <div class="text-base font-bold {% if kpis.needs_reboot > 0 %}text-cyber-red{% else %}text-cyber-green{% endif %}">{{ kpis.needs_reboot }}</div>
+        <div class="text-xs text-gray-500">Reboot</div>
     </a>
-    <a href="/audit-full?filter=disk_critical" class="card p-3 text-center flex-1 hover:bg-cyber-hover {% if filter == 'disk_critical' %}ring-1 ring-cyber-red{% endif %}">
-        <div class="text-lg font-bold {% if kpis.disk_critical > 0 %}text-cyber-red{% else %}text-cyber-green{% endif %}">{{ kpis.disk_critical }}</div>
+    <a href="/audit-full?filter=disk_critical" class="card p-2 text-center flex-1 hover:bg-cyber-hover {% if filter == 'disk_critical' %}ring-1 ring-cyber-red{% endif %}" style="min-width:0">
+        <div class="text-base font-bold {% if kpis.disk_critical > 0 %}text-cyber-red{% else %}text-cyber-green{% endif %}">{{ kpis.disk_critical }}</div>
         <div class="text-xs text-gray-500">Disque >= 90%</div>
     </a>
-    <a href="/audit-full?filter=disk_warning" class="card p-3 text-center flex-1 hover:bg-cyber-hover {% if filter == 'disk_warning' %}ring-1 ring-cyber-yellow{% endif %}">
-        <div class="text-lg font-bold {% if kpis.disk_warning > 0 %}text-cyber-yellow{% else %}text-cyber-green{% endif %}">{{ kpis.disk_warning }}</div>
+    <a href="/audit-full?filter=disk_warning" class="card p-2 text-center flex-1 hover:bg-cyber-hover {% if filter == 'disk_warning' %}ring-1 ring-cyber-yellow{% endif %}" style="min-width:0">
+        <div class="text-base font-bold {% if kpis.disk_warning > 0 %}text-cyber-yellow{% else %}text-cyber-green{% endif %}">{{ kpis.disk_warning }}</div>
         <div class="text-xs text-gray-500">Disque >= 80%</div>
     </a>
-    <a href="/audit-full?filter=uptime" class="card p-3 text-center flex-1 hover:bg-cyber-hover {% if filter == 'uptime' %}ring-1 ring-cyber-yellow{% endif %}">
-        <div class="text-lg font-bold {% if kpis.uptime_long > 0 %}text-cyber-yellow{% else %}text-cyber-green{% endif %}">{{ kpis.uptime_long }}</div>
-        <div class="text-xs text-gray-500">Uptime > 4 mois</div>
+    <a href="/audit-full?filter=uptime" class="card p-2 text-center flex-1 hover:bg-cyber-hover {% if filter == 'uptime' %}ring-1 ring-cyber-yellow{% endif %}" style="min-width:0">
+        <div class="text-base font-bold {% if kpis.uptime_long > 0 %}text-cyber-yellow{% else %}text-cyber-green{% endif %}">{{ kpis.uptime_long }}</div>
+        <div class="text-xs text-gray-500">Uptime > 4m</div>
     </a>
 </div>
 {% if filter %}