From 97432927753fcb515d0338f93896efaef0b0aeff Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 26 Nov 2025 17:58:25 -0600
Subject: [PATCH] dsfsdf

---
 app/emails/page.tsx | 177 ++++++++++++++++++++++----------------------
 1 file changed, 89 insertions(+), 88 deletions(-)

diff --git a/app/emails/page.tsx b/app/emails/page.tsx
index 8d88895..44562e2 100644
--- a/app/emails/page.tsx
+++ b/app/emails/page.tsx
@@ -9,7 +9,7 @@ interface Email {
   subject: string;
   date: string;
   processed: string;
-  processedAt: string | null; // Wird nicht mehr angezeigt, aber im Interface belassen
+  processedAt: string | null;
   processedBy: string | null;
   queuedTo: string | null;
   status: string | null;
@@ -57,20 +57,13 @@ export default function Emails() {
   const formatDate = (dateStr: string | null) => {
     if (!dateStr) return '';
     const date = new Date(dateStr);
-    // Kompaktes Datum formatieren
     return date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
   };
 
-  // DEFINITION DES GRID LAYOUTS
-  // 1fr = Subject (nimmt den Rest)
-  // auto = Passt sich exakt der Breite des Inhalts an (für Key, Date, etc.)
-  const gridLayoutClass = "grid grid-cols-[1fr_auto_auto_auto_auto_auto_auto_auto] gap-x-4 items-center";
-
   return (
     <div className="min-h-screen bg-gray-50 p-4">
       <nav className="w-full mb-6 bg-white p-3 rounded shadow-sm border border-gray-100">
         <ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
-           {/* Breadcrumbs verkürzt für Übersichtlichkeit */}
           <li><Link href="/" className="hover:text-blue-600">Home</Link></li>
           <li className="mx-1">/</li>
           <li><Link href={`/mailboxes?bucket=${bucket}`} className="hover:text-blue-600">Mailboxes</Link></li>
@@ -83,89 +76,97 @@ export default function Emails() {
         {mailbox} <span className="text-gray-400 font-normal text-lg">in {bucket}</span>
       </h1>
       
-      {/* Container - overflow-x-auto erlaubt Scrollen nur wenn der Key GIGANTISCH ist und den Bildschirm sprengt */}
-      <div className="w-full bg-white rounded shadow-sm border border-gray-200 overflow-x-auto">
-        <div className="min-w-fit">
-          
-          {/* HEADER */}
-          <div className={`${gridLayoutClass} px-4 py-3 bg-gray-100 border-b border-gray-200 text-xs font-semibold text-gray-600 uppercase tracking-wider`}>
-            <div>Subject</div>
-            <div className="whitespace-nowrap">Date</div>
-            <div>Key</div>
-            <div className="text-center">Proc.</div>
-            {/* Proc At entfernt */}
-            <div>Proc. By</div>
-            <div>Queued</div>
-            <div>Status</div>
-            <div className="text-right">Action</div>
-          </div>
-
-          {/* ROWS */}
-          <div className="divide-y divide-gray-100">
-            {emails.length === 0 ? (
-              <div className="p-8 text-center text-gray-500">No emails found</div>
-            ) : emails.map((e: Email) => (
-              <div key={e.key} className={`${gridLayoutClass} px-4 py-2 hover:bg-blue-50 transition-colors text-sm`}>
+      <div className="w-full bg-white rounded shadow-sm border border-gray-200 overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead className="bg-gray-100 border-b border-gray-200">
+              <tr>
+                {/* SUBJECT: Bekommt keine Breite, damit es den Rest nimmt */}
+                <th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Subject
+                </th>
                 
-                {/* 1. Subject: truncate sorgt für "..." am Ende, min-w-0 ist wichtig für Grid Truncation */}
-                <div className="font-medium text-gray-900 truncate min-w-0 pr-4" title={e.subject}>
-                  {e.subject}
-                </div>
+                {/* ALLE ANDEREN: w-px + whitespace-nowrap sorgt für "Fit to Content" */}
+                <th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
+                  Date
+                </th>
+                <th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
+                  Key
+                </th>
+                <th className="py-3 px-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
+                  Proc.
+                </th>
+                <th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
+                  Proc. By
+                </th>
+                <th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
+                  Queued
+                </th>
+                <th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
+                  Status
+                </th>
+                <th className="py-3 px-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 text-sm">
+              {emails.length === 0 ? (
+                <tr>
+                  <td colSpan={8} className="px-4 py-8 text-center text-gray-500">No emails found</td>
+                </tr>
+              ) : emails.map((e: Email) => (
+                <tr key={e.key} className="hover:bg-blue-50 transition-colors">
+                  
+                  {/* TRICK FÜR SUBJECT:
+                      max-w-0 ist entscheidend! In einer Tabelle erlaubt es dem Browser,
+                      die Breite trotzdem zu berechnen (Restplatz), aber "truncate" zu aktivieren,
+                      wenn der Inhalt diesen Restplatz sprengt.
+                  */}
+                  <td className="py-2 px-3 text-gray-900 w-full max-w-0 truncate" title={e.subject}>
+                    {e.subject}
+                  </td>
 
-                {/* 2. Date: Fixed width content via whitespace-nowrap */}
-                <div className="whitespace-nowrap text-gray-500 text-xs">
-                  {formatDate(e.date)}
-                </div>
-
-                {/* 3. Key: Monospace Font, volle Sichtbarkeit, selektierbar */}
-                <div className="font-mono text-xs text-gray-600 select-all">
-                  {e.key}
-                </div>
-
-                {/* 4. Processed: Kurz */}
-                <div className="text-center">
-                   <span className={`inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium ${
-                    e.processed === 'true' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
-                  }`}>
-                    {e.processed === 'true' ? 'Y' : 'N'}
-                  </span>
-                </div>
-
-                {/* Proc At entfernt */}
-
-                {/* 5. Processed By: Auto width */}
-                <div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.processedBy || ''}>
-                  {e.processedBy ? e.processedBy.split('@')[0] : '-'}
-                </div>
-
-                {/* 6. Queued: Auto width */}
-                <div className="text-gray-500 text-xs truncate max-w-[150px]" title={e.queuedTo || ''}>
-                   {e.queuedTo || '-'}
-                </div>
-
-                {/* 7. Status */}
-                <div className="whitespace-nowrap">
-                  {e.status ? (
-                    <span className={`text-xs ${
-                      e.status === 'delivered' ? 'text-green-600' : 
-                      e.status === 'failed' ? 'text-red-600' : 
-                      'text-gray-500'
-                    }`}>
-                      {e.status}
+                  <td className="py-2 px-3 whitespace-nowrap text-gray-500 text-xs">
+                    {formatDate(e.date)}
+                  </td>
+                  
+                  {/* Key: Monospace, volle Breite durch whitespace-nowrap garantiert */}
+                  <td className="py-2 px-3 whitespace-nowrap font-mono text-xs text-gray-600 select-all">
+                    {e.key}
+                  </td>
+                  
+                  <td className="py-2 px-3 whitespace-nowrap text-center">
+                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${e.processed === 'true' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}>
+                      {e.processed === 'true' ? 'Y' : 'N'}
                     </span>
-                  ) : <span className="text-gray-300">-</span>}
-                </div>
-
-                {/* 8. Action: Rechtsbündig aligned mit Header */}
-                <div className="text-right font-medium">
-                  <Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 hover:underline">
-                    View
-                  </Link>
-                </div>
-
-              </div>
-            ))}
-          </div>
+                  </td>
+                  
+                  <td className="py-2 px-3 whitespace-nowrap text-gray-500 text-xs">
+                    {e.processedBy ? e.processedBy.split('@')[0] : '-'}
+                  </td>
+                  
+                  <td className="py-2 px-3 whitespace-nowrap text-gray-500 text-xs">
+                    {e.queuedTo || '-'}
+                  </td>
+                  
+                  <td className="py-2 px-3 whitespace-nowrap">
+                    {e.status ? (
+                      <span className={`text-xs ${e.status === 'delivered' ? 'text-green-600' : e.status === 'failed' ? 'text-red-600' : 'text-gray-500'}`}>
+                        {e.status}
+                      </span>
+                    ) : '-'}
+                  </td>
+                  
+                  <td className="py-2 px-3 whitespace-nowrap text-right font-medium">
+                    <Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 hover:underline">
+                      View
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
       </div>
     </div>