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
This commit is contained in:
sebastjanartic 2025-09-01 22:09:29 +00:00
parent 3d07c4d2c8
commit 156da5dec8
3 changed files with 6 additions and 6 deletions

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {