[Pagination] Fix sizing on small screens when they have tooltips

[devonpmack]

WHY are these changes introduced?

Fixes #2745

WHAT is this pull request doing?

Properly styling the buttons even if there is a tooltip wrapper on one of them

Before	After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Make sure you resize your window to small width (mobile)

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page, Pagination} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <div>
        <Pagination hasPrevious previousTooltip="previous" />
        <br />
        <Pagination hasPrevious />
      </div>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[devonpmack]

Getting a linting error because it's doing 3 levels of nesting. Anyone know a better way to do this?

[dleroux]

Because the span will get added inside the other component I think this is your best bet. Good job on explicitly adding the span in the prop, it avoids surprises.

[github-actions]

🟢 This pull request modifies 3 files and might impact 3 other files.

Details:

All files potentially affected (total: 3)

• /src/components/Pagination/Pagination.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Pagination/Pagination.scss (total: 3)

Files potentially affected (total: 3)

• /src/components/Pagination/Pagination.tsx
• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx

🧩 src/components/Pagination/Pagination.tsx (total: 2)

Files potentially affected (total: 2)

• /src/components/Page/components/Header/Header.tsx
• /src/components/Page/Page.tsx

[PabloVallejo]

Nice that you specify the wrapper!

[PabloVallejo]

🎩 Working nicely in small resolution! ✅