From cd5f986489d841bb8e0ecd9457feb48929c44aad Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Thu, 7 May 2026 16:35:09 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Massnahmen-Tabelle=20Layout=20=E2=80=94?=
 =?UTF-8?q?=20volle=20Textbreite=20statt=20truncate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Grid-Layout statt flex mit fixen Breiten. Texte umbrechen
statt abschneiden. Gefaehrdung-Spalte 200px, Status 80px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../sdk/iace/[projectId]/mitigations/page.tsx | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/admin-compliance/app/sdk/iace/[projectId]/mitigations/page.tsx b/admin-compliance/app/sdk/iace/[projectId]/mitigations/page.tsx
index b755522..b9a0ae6 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/mitigations/page.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/mitigations/page.tsx
@@ -174,33 +174,33 @@ export default function MitigationsPage() {
             {isExpanded && items.length > 0 && (
               <div className="border-t border-gray-100 dark:border-gray-700">
                 {/* Table header */}
-                <div className="flex items-center gap-2 px-4 py-2 bg-gray-50 dark:bg-gray-750 text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  <div className="w-6">
+                <div className="grid grid-cols-[24px_1fr_200px_80px] gap-2 px-4 py-2 bg-gray-50 dark:bg-gray-750 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <div>
                     <input type="checkbox" checked={allSelected} onChange={() => selectAllInType(type)}
                       className="accent-purple-600" title="Alle auswaehlen" />
                   </div>
-                  <div className="flex-1">Massnahme</div>
-                  <div className="w-24">Status</div>
-                  <div className="w-32">Gefaehrdung</div>
+                  <div>Massnahme</div>
+                  <div>Gefaehrdung</div>
+                  <div>Status</div>
                 </div>
                 {/* Rows */}
                 {items.map((m) => (
                   <div key={m.id}
-                    className={`flex items-center gap-2 px-4 py-2 border-t border-gray-50 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors ${selected.has(m.id) ? 'bg-purple-50 dark:bg-purple-900/10' : ''}`}>
-                    <div className="w-6">
+                    className={`grid grid-cols-[24px_1fr_200px_80px] gap-2 px-4 py-2 border-t border-gray-50 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors ${selected.has(m.id) ? 'bg-purple-50 dark:bg-purple-900/10' : ''}`}>
+                    <div className="pt-0.5">
                       <input type="checkbox" checked={selected.has(m.id)} onChange={() => toggleSelect(m.id)}
                         className="accent-purple-600" />
                     </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="text-sm text-gray-900 dark:text-white truncate">{m.title || ''}</div>
-                      {m.description && <div className="text-xs text-gray-400 truncate">{m.description}</div>}
+                    <div className="min-w-0">
+                      <div className="text-sm text-gray-900 dark:text-white">{m.title || ''}</div>
+                      {m.description && <div className="text-xs text-gray-400 mt-0.5">{m.description}</div>}
                     </div>
-                    <div className="w-24">
-                      <StatusBadge status={m.status} />
-                    </div>
-                    <div className="w-32 text-xs text-gray-500 truncate">
+                    <div className="text-xs text-gray-500">
                       {(m.linked_hazard_names || []).join(', ') || '-'}
                     </div>
+                    <div>
+                      <StatusBadge status={m.status} />
+                    </div>
                   </div>
                 ))}
               </div>