Pager looks broken [#3416676]

Problem/Motivation

The pager looks broken. See the attached screenshots for reference.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comment	File	Size	Author
#11	rover-patch.png	23.69 KB	bindu r
#8	issue_1.png	141.18 KB	tanuja bohra
#2	3416676-after-patch.png	5.59 KB	arun velusamy
#2	3416676-before-patch.png	6.04 KB	arun velusamy
	Screenshot at Jan 24 16-51-10.png	49.68 KB	shweta__sharma

Issue fork rover-3416676

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

1 hidden branch

3416676-Pager-looks-broken

changes, plain diff MR !8

Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

24 January 2024 at 11:26

shweta__sharma created an issue. See original summary.

Comment #2

arun velusamy commented 31 January 2024 at 04:23

Status	File	Size
new	3416676-before-patch.png	6.04 KB
new	3416676-after-patch.png	5.59 KB

I have CSS code available to address the design issues with this pager. Please use the provided CSS and confirm its effectiveness.

.custom-pagination .page-item .page-link {
  width: auto;
  min-width: 40px;
  padding: 0 10px;
}
.custom-pagination .page-item .page-link[rel="prev"],
.custom-pagination .page-item .page-link[rel="next"] {
  border-radius: 5px;
}
.custom-pagination .page-item .page-link[title="Go to first page"],
.custom-pagination .page-item .page-link[title="Go to last page"] {
  border-radius: 5px;
}

I have included the before and after screenshots for your reference. Please review