Benjamin_Boenisch/breakpilot-compliance
1
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Massnahmen-Tabelle Layout — volle Textbreite statt truncate

Browse Source 
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>
This commit is contained in:
Benjamin Admin
2026-05-07 16:35:09 +02:00
parent a4b75dc6b1
commit cd5f986489
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-compliance/app/sdk/iace/[projectId]/mitigations/page.tsx
+14 -14
View File
@@ -174,33 +174,33 @@ export default function MitigationsPage() {
{isExpanded && items.length > 0 && ( {isExpanded && items.length > 0 && (
<div className="border-t border-gray-100 dark:border-gray-700"> <div className="border-t border-gray-100 dark:border-gray-700">
{/* Table header */} {/* 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="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 className="w-6"> <div>
<input type="checkbox" checked={allSelected} onChange={() => selectAllInType(type)} <input type="checkbox" checked={allSelected} onChange={() => selectAllInType(type)}
className="accent-purple-600" title="Alle auswaehlen" /> className="accent-purple-600" title="Alle auswaehlen" />
</div> </div>
<div className="flex-1">Massnahme</div> <div>Massnahme</div>
<div className="w-24">Status</div> <div>Gefaehrdung</div>
<div className="w-32">Gefaehrdung</div> <div>Status</div>
</div> </div>
{/* Rows */} {/* Rows */}
{items.map((m) => ( {items.map((m) => (
<div key={m.id} <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' : ''}`}> 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="w-6"> <div className="pt-0.5">
<input type="checkbox" checked={selected.has(m.id)} onChange={() => toggleSelect(m.id)} <input type="checkbox" checked={selected.has(m.id)} onChange={() => toggleSelect(m.id)}
className="accent-purple-600" /> className="accent-purple-600" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="min-w-0">
<div className="text-sm text-gray-900 dark:text-white truncate">{m.title || ''}</div> <div className="text-sm text-gray-900 dark:text-white">{m.title || ''}</div>
{m.description && <div className="text-xs text-gray-400 truncate">{m.description}</div>} {m.description && <div className="text-xs text-gray-400 mt-0.5">{m.description}</div>}
</div> </div>
<div className="w-24"> <div className="text-xs text-gray-500">
<StatusBadge status={m.status} />
</div>
<div className="w-32 text-xs text-gray-500 truncate">
{(m.linked_hazard_names || []).join(', ') || '-'} {(m.linked_hazard_names || []).join(', ') || '-'}
</div> </div>
<div>
<StatusBadge status={m.status} />
</div>
</div> </div>
))} ))}
</div> </div>