sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve pagination display for better readability on smaller screens

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/pages/FolxStadlPage.tsx
View File

@ -258,7 +258,7 @@ export default function FolxStadlPage() {
{/* Bottom Pagination */} {/* Bottom Pagination */}
{totalPages > 1 && ( {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 <Button
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
@ -269,7 +269,7 @@ export default function FolxStadlPage() {
Vorherige Vorherige
</Button> </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) => { {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
let pageNum; let pageNum;
if (totalPages <= 5) { if (totalPages <= 5) {

4
client/src/pages/GeschichteLiedPage.tsx
View File

@ -260,7 +260,7 @@ export default function GeschichteLiedPage() {
{/* Bottom Pagination */} {/* Bottom Pagination */}
{totalPages > 1 && ( {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 <Button
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
@ -271,7 +271,7 @@ export default function GeschichteLiedPage() {
Vorherige Vorherige
</Button> </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) => { {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
let pageNum; let pageNum;
if (totalPages <= 5) { if (totalPages <= 5) {

4
client/src/pages/GipfelstammtischPage.tsx
View File

@ -260,7 +260,7 @@ export default function GipfelstammtischPage() {
{/* Bottom Pagination */} {/* Bottom Pagination */}
{totalPages > 1 && ( {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 <Button
variant="outline" variant="outline"
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
@ -271,7 +271,7 @@ export default function GipfelstammtischPage() {
Vorherige Vorherige
</Button> </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) => { {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
let pageNum; let pageNum;
if (totalPages <= 5) { if (totalPages <= 5) {