From 3dce4dace1ba5674165151017c1118c671f0e4dc Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 26 Nov 2025 17:43:45 -0600
Subject: [PATCH] key + breite optimizing

---
 app/emails/page.tsx | 71 ++++++++++++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 26 deletions(-)

diff --git a/app/emails/page.tsx b/app/emails/page.tsx
index 77f30c2..b5652a9 100644
--- a/app/emails/page.tsx
+++ b/app/emails/page.tsx
@@ -57,12 +57,13 @@ export default function Emails() {
   const formatDate = (dateStr: string | null) => {
     if (!dateStr) return 'N/A';
     const date = new Date(dateStr);
-    return date.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
+    return date.toLocaleString('en-US', { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false });
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-8">
-      <nav className="max-w-6xl mx-auto mb-6 bg-white p-4 rounded-lg shadow-sm">
+    // 1. "w-full" statt fixer max-width, um den ganzen Schirm zu nutzen
+    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-gray-100 p-4 md:p-8">
+      <nav className="w-full mx-auto mb-6 bg-white p-4 rounded-lg shadow-sm">
         <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>
@@ -73,42 +74,60 @@ export default function Emails() {
           <li className="font-semibold text-gray-700">Emails</li>
         </ol>
       </nav>
-      <h1 className="text-4xl font-bold mb-8 text-center text-gray-800">Emails for {mailbox} in {bucket}</h1>
+      <h1 className="text-3xl font-bold mb-8 text-center text-gray-800">Emails for {mailbox} in {bucket}</h1>
       
-      <div className="overflow-x-auto max-w-6xl mx-auto bg-white rounded-lg shadow-md">
-        <table className="min-w-full divide-y divide-gray-200">
+      {/* Container für die Tabelle */}
+      <div className="w-full bg-white rounded-lg shadow-md overflow-hidden">
+        
+        {/* 2. "table-fixed": Zwingt die Tabelle, die definierten Breiten einzuhalten 
+               und Texte abzuschneiden, statt die Tabelle zu verbreitern.
+        */}
+        <table className="w-full table-fixed divide-y divide-gray-200 text-xs md:text-sm">
           <thead className="bg-blue-50">
             <tr>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Subject</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Date</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Processed</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Processed At</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Processed By</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Queued To</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Status</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Actions</th>
+              {/* Subject bekommt keine feste Breite -> nimmt den verfügbaren Platz */}
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-auto">Subject</th>
+              
+              {/* Anderen Spalten geben wir feste Breiten (w-...), damit sie gut aussehen */}
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-24 md:w-32">Date</th>
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20 md:w-24">Key</th>
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-16">Proc.</th>
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-24 md:w-32">Proc. At</th>
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Proc. By</th>
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Queued</th>
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-20">Status</th>
+              <th className="px-2 py-3 text-left font-medium text-gray-700 uppercase tracking-wider w-16">Act</th>
             </tr>
           </thead>
           <tbody className="bg-white divide-y divide-gray-200">
             {emails.length === 0 ? (
               <tr>
-                <td colSpan={8} className="px-4 py-8 text-center text-gray-500">No emails found</td>
+                <td colSpan={9} 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">
-                <td className="px-4 py-4 text-sm text-gray-900 max-w-xs truncate">{e.subject}</td>
-                <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{formatDate(e.date)}</td>
-                <td className="px-4 py-4 whitespace-nowrap text-sm">
-                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${e.processed === 'true' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
-                    {e.processed === 'true' ? 'Yes' : 'No'}
+                
+                {/* 3. Subject Cell: 
+                    "truncate" macht "..." wenn der Text zu lang ist.
+                    "title" zeigt den vollen Text beim Hovern an.
+                */}
+                <td className="px-2 py-3 text-gray-900 truncate" title={e.subject}>
+                  {e.subject}
+                </td>
+
+                <td className="px-2 py-3 text-gray-500 truncate">{formatDate(e.date)}</td>
+                <td className="px-2 py-3 text-gray-900 truncate" title={e.key}>{e.key}</td>
+                <td className="px-2 py-3">
+                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${e.processed === 'true' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>
+                    {e.processed === 'true' ? 'Y' : 'N'}
                   </span>
                 </td>
-                <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{formatDate(e.processedAt)}</td>
-                <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{e.processedBy || '-'}</td>
-                <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{e.queuedTo || '-'}</td>
-                <td className="px-4 py-4 whitespace-nowrap text-sm">
+                <td className="px-2 py-3 text-gray-500 truncate">{formatDate(e.processedAt)}</td>
+                <td className="px-2 py-3 text-gray-500 truncate" title={e.processedBy || ''}>{e.processedBy || '-'}</td>
+                <td className="px-2 py-3 text-gray-500 truncate" title={e.queuedTo || ''}>{e.queuedTo || '-'}</td>
+                <td className="px-2 py-3 truncate">
                   {e.status ? (
-                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                       e.status === 'delivered' ? 'bg-green-100 text-green-800' : 
                       e.status === 'failed' ? 'bg-red-100 text-red-800' : 
                       'bg-gray-100 text-gray-800'
@@ -117,7 +136,7 @@ export default function Emails() {
                     </span>
                   ) : '-'}
                 </td>
-                <td className="px-4 py-4 whitespace-nowrap text-sm font-medium">
+                <td className="px-2 py-3 font-medium text-center">
                   <Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-900">
                     View
                   </Link>