From 4eddad76a71e43d648b59203f12fee6e6ace1844 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 26 Nov 2025 18:05:31 -0600
Subject: [PATCH] dfgdfg

---
 app/emails/page.tsx | 172 ++++++++++++++++++++------------------------
 1 file changed, 79 insertions(+), 93 deletions(-)

diff --git a/app/emails/page.tsx b/app/emails/page.tsx
index 44562e2..3ee3797 100644
--- a/app/emails/page.tsx
+++ b/app/emails/page.tsx
@@ -61,8 +61,8 @@ export default function Emails() {
   };
 
   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">
+    <div className="min-h-screen bg-gray-50 p-6">
+      <nav className="w-full mb-8 bg-white p-4 rounded shadow-sm border border-gray-100">
         <ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
           <li><Link href="/" className="hover:text-blue-600">Home</Link></li>
           <li className="mx-1">/</li>
@@ -72,102 +72,88 @@ export default function Emails() {
         </ol>
       </nav>
       
-      <h1 className="text-2xl font-bold mb-6 text-gray-800 break-all">
+      <h1 className="text-2xl font-bold mb-8 text-gray-800 break-all">
         {mailbox} <span className="text-gray-400 font-normal text-lg">in {bucket}</span>
       </h1>
       
-      <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>
-                
-                {/* 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>
+      {/* Container mit Padding für den "Rahmen um die Tabelle" */}
+      <div className="w-full bg-white rounded shadow-sm border border-gray-200 p-2 overflow-hidden">
+        
+        {/* table-fixed: Zwingt die Tabelle, die definierten Breiten einzuhalten (kein Überlauf).
+            border-separate + border-spacing-x-2: Erzeugt die "Gaps" zwischen den Spalten.
+        */}
+        <table className="w-full table-fixed border-separate border-spacing-x-2 border-spacing-y-1 text-left">
+          <thead className="text-xs font-semibold text-gray-600 uppercase tracking-wider">
+            <tr>
+              {/* SUBJECT: Keine Breite definiert (w-auto) -> nimmt den RESTLICHEN Platz */}
+              <th className="pb-3 border-b border-gray-200">Subject</th>
 
-                  <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'}
+              {/* FESTE BREITEN für den Rest, damit sie nicht zerdrückt werden */}
+              <th className="pb-3 border-b border-gray-200 w-28">Date</th>
+              <th className="pb-3 border-b border-gray-200 w-[28rem]">Key</th> {/* Breit genug für lange Keys */}
+              <th className="pb-3 border-b border-gray-200 text-center w-12">Proc.</th>
+              <th className="pb-3 border-b border-gray-200 w-32">Proc. By</th>
+              <th className="pb-3 border-b border-gray-200 w-32">Queued</th>
+              <th className="pb-3 border-b border-gray-200 w-24">Status</th>
+              <th className="pb-3 border-b border-gray-200 text-right w-16">Action</th>
+            </tr>
+          </thead>
+          <tbody className="text-sm">
+            {emails.length === 0 ? (
+              <tr>
+                <td colSpan={8} className="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 group">
+                
+                {/* 1. Subject: truncate sorgt für "..." am Ende, da die Tabellenbreite fix ist */}
+                <td className="py-2 text-gray-900 truncate" title={e.subject}>
+                  <div className="truncate">{e.subject}</div>
+                </td>
+
+                <td className="py-2 text-gray-500 text-xs whitespace-nowrap">
+                  {formatDate(e.date)}
+                </td>
+                
+                {/* Key: Monospace für exakte Breite, text-xs damit er in die 28rem passt */}
+                <td className="py-2 font-mono text-xs text-gray-600 select-all truncate" title={e.key}>
+                  {e.key}
+                </td>
+                
+                <td className="py-2 text-center align-middle">
+                   {/* Kleinerer Badge */}
+                  <span className={`inline-block w-4 h-4 rounded-full ${e.processed === 'true' ? 'bg-green-400' : 'bg-gray-300'}`} title={e.processed === 'true' ? 'Processed' : 'Not processed'}></span>
+                </td>
+                
+                <td className="py-2 text-gray-500 text-xs truncate" title={e.processedBy || ''}>
+                  {e.processedBy ? e.processedBy.split('@')[0] : '-'}
+                </td>
+                
+                <td className="py-2 text-gray-500 text-xs truncate" title={e.queuedTo || ''}>
+                   {e.queuedTo || '-'}
+                </td>
+                
+                <td className="py-2 whitespace-nowrap">
+                  {e.status ? (
+                    <span className={`text-xs font-medium ${
+                      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-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>
+                  ) : <span className="text-gray-300">-</span>}
+                </td>
+                
+                <td className="py-2 text-right font-medium">
+                  <Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 underline decoration-blue-200 hover:decoration-blue-800">
+                    View
+                  </Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
   );