Description

The small pagination buttons displayed next to multipage topics in the forum topic list are too narrow when a page number contains two or more digits.

Single-digit page numbers such as 1, 2, and 3 fit correctly. However, page numbers such as 10, 11, 25, or higher appear cramped, with the digits positioned too close to the button borders.

The issue is caused by a fixed width being applied to every pagination button, regardless of the number of digits it contains.

Location

The relevant CSS is located in:

phpBB/styles/prosilver/theme/common.css

Under the following section:

/* Pagination in viewforum for multipage topics */

Current CSS

.row .pagination {

display: block;

margin-top: 3px;

margin-bottom: 3px;

}

.row .pagination > ul {

margin: 0;

}

.row .pagination li a,

.row .pagination li span {

font-size: var(--ps-font-tiny);

border-radius: 2px;

width: calc(var(--ps-font-tiny) + 6px);

height: calc(var(--ps-font-normal) + 6px);

padding: 1px 3px;

}

Cause

The following declaration gives every pagination button the same fixed width:

width: calc(var(--ps-font-tiny) + 6px);

That width is sufficient for a single-digit page number, but it does not allow the button to grow when the page number contains two or three digits.

The horizontal padding is also included within the fixed width, leaving very little space around larger page numbers.

Expected result

Pagination buttons should have a consistent minimum size while still being able to grow automatically when the page number contains additional digits.

Actual result

All pagination buttons receive the same fixed width, causing two-digit and three-digit page numbers to appear too narrow.

Suggested fix[

Replace the fixed width with a minimum width and allow the element to grow based on its content:

.row .pagination li a,

.row .pagination li span {

font-size: var(--ps-font-tiny);

border-radius: 2px;

min-width: calc(var(--ps-font-tiny) + 6px);

width: auto;

height: calc(var(--ps-font-normal) + 6px);

padding: 1px 5px;

box-sizing: border-box;

text-align: center;

}

Why this fixes the issue

Using:

min-width: calc(var(--ps-font-tiny) + 6px);

width: auto;

keeps single-digit pagination buttons compact while allowing buttons containing 10, 25, 100, or larger values to expand naturally.

The slightly increased horizontal padding also provides enough visual space between the page number and the button border.

This change only affects the small pagination links displayed next to multipage topics in the forum topic list. It does not affect the main pagination shown above or below an opened topic.