feat: Tabellenkopf in Berichte-Seite fixiert und Scrollen verbessert

- thead mit sticky top-0 versehen für festen Header beim Scrollen
- vertikales Scrollen durch max-h-[80vh] und overflow-auto aktiviert
- optimiert für Desktop- und Mobilgeräte (iOS, iPad, etc.)
- Pagination entfernt für besseres Nutzererlebnis beim Scrollen

pages/meldungen.tsx

@@ -11,11 +11,9 @@ type Meldung = {
   i: string;
 };
 
-const ITEMS_PER_PAGE = 10;
-
 export default function Messages() {
   const [messages, setMessages] = useState<Meldung[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
+
   const [sourceFilter, setSourceFilter] = useState<string>("Alle");
 
   // Datum initialisieren: von = heute - 30 Tage, bis = heute
@@ -55,7 +53,6 @@ export default function Messages() {
         return;
       }
       setMessages(data);
-      setCurrentPage(1);
     } catch (err) {
       console.error("Fehler beim Laden der Meldungen:", err);
     }
@@ -66,12 +63,6 @@ export default function Messages() {
       ? messages
       : messages.filter((m) => m.i === sourceFilter);
 
-  const totalPages = Math.ceil(filteredMessages.length / ITEMS_PER_PAGE);
-  const currentMessages = filteredMessages.slice(
-    (currentPage - 1) * ITEMS_PER_PAGE,
-    currentPage * ITEMS_PER_PAGE
-  );
-
   const allSources = Array.from(new Set(messages.map((m) => m.i))).sort();
   // einmal beim laden de Seite die Meldungen abrufen
   useEffect(() => {
@@ -109,9 +100,9 @@ export default function Messages() {
         </select>
       </div>
 
-      <div className="overflow-x-auto">
+      <div className="overflow-auto max-h-[80vh]">
         <table className="min-w-full border">
-          <thead className="bg-gray-100 text-left">
+          <thead className="bg-gray-100 text-left sticky top-0 z-10">
             <tr>
               <th className="p-2 border">Prio</th>
               <th className="p-2 border">Zeitstempel</th>
@@ -121,7 +112,7 @@ export default function Messages() {
             </tr>
           </thead>
           <tbody>
-            {currentMessages.map((msg, index) => (
+            {filteredMessages.map((msg, index) => (
               <tr key={index} className="hover:bg-gray-50">
                 <td className="border p-2">
                   <div
@@ -143,28 +134,6 @@ export default function Messages() {
           </div>
         )}
       </div>
-
-      <div className="flex justify-between items-center mt-4">
-        <button
-          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-          disabled={currentPage === 1}
-          className="bg-littwin-blue text-white px-4 py-2 rounded"
-        >
-          Zurück
-        </button>
-        <span>
-          Seite {currentPage} von {totalPages}
-        </span>
-        <button
-          onClick={() =>
-            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-          }
-          disabled={currentPage === totalPages}
-          className="bg-littwin-blue text-white px-4 py-2 rounded"
-        >
-          Weiter
-        </button>
-      </div>
     </div>
   );
 }