Pagination component does not match the input/button components

[pricop]

I'd like to suggest improving the Pagination component to match the Input / Button components height

In the past, Bootstrap 4 & 5, matched the Pagination component's height to Input and Button components, allowing us to add in-line components without messing with the height.

Currently, both input and button components apply a min-height on them.

While the pagination component respects the font-size, line-height, and paddings, it does not apply the min-height.

An example of such case is a "Go to" input to assist the Pagination component, which is extremely common for tables.

This causes the following issue when used with inline inputs and buttons (look at the red lines & spacing on the pagination component):

The fix would be to make the pagination match the the input and button height, simiarly to how Bootstrap 4 & Boostrap 5 worked.

For reference, there's a super well documented article on "Manual input pagination" forms at https://app.uxcel.com/courses/ui-components-best-practices/anatomy-216#manual-input-7118 which shows how a manual input for pagination would work alongside pagination buttons.

I've opened a PR for this: #42137 so you can check it out.

[abhayclasher]

ur totally right. keeping the heights matched is huge for layouts with inline stuff. saw ur PR too - that min-height fix should definitely be in v6 for better consistency 👍

[mdo]

This is in v6-dev now.