From 156da5dec86db14225999ed2a557da35686e3d0a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 22:09:29 +0000
Subject: [PATCH] Improve pagination display for better readability on smaller
 screens

Update pagination components to include overflow scrolling and ensure proper flex behavior for page numbers.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
---
 client/src/pages/FolxStadlPage.tsx        | 4 ++--
 client/src/pages/GeschichteLiedPage.tsx   | 4 ++--
 client/src/pages/GipfelstammtischPage.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index da97cd1..f68c21a 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -258,7 +258,7 @@ export default function FolxStadlPage() {
 
         {/* Bottom Pagination */}
         {totalPages > 1 && (
-          <div className="mt-8 flex justify-center gap-2">
+          <div className="mt-8 flex justify-center gap-2 px-4 overflow-x-auto">
             <Button
               variant="outline"
               onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
@@ -269,7 +269,7 @@ export default function FolxStadlPage() {
               Vorherige
             </Button>
             
-            <div className="flex gap-1">
+            <div className="flex gap-1 min-w-0 flex-shrink-0">
               {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                 let pageNum;
                 if (totalPages <= 5) {
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index 7678efe..f02787c 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -260,7 +260,7 @@ export default function GeschichteLiedPage() {
 
         {/* Bottom Pagination */}
         {totalPages > 1 && (
-          <div className="mt-8 flex justify-center gap-2">
+          <div className="mt-8 flex justify-center gap-2 px-4 overflow-x-auto">
             <Button
               variant="outline"
               onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
@@ -271,7 +271,7 @@ export default function GeschichteLiedPage() {
               Vorherige
             </Button>
             
-            <div className="flex gap-1">
+            <div className="flex gap-1 min-w-0 flex-shrink-0">
               {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                 let pageNum;
                 if (totalPages <= 5) {
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index 3fddfa7..27c6c22 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -260,7 +260,7 @@ export default function GipfelstammtischPage() {
 
         {/* Bottom Pagination */}
         {totalPages > 1 && (
-          <div className="mt-8 flex justify-center gap-2">
+          <div className="mt-8 flex justify-center gap-2 px-4 overflow-x-auto">
             <Button
               variant="outline"
               onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
@@ -271,7 +271,7 @@ export default function GipfelstammtischPage() {
               Vorherige
             </Button>
             
-            <div className="flex gap-1">
+            <div className="flex gap-1 min-w-0 flex-shrink-0">
               {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                 let pageNum;
                 if (totalPages <= 5) {