[Modal] Fix spacing in footer

[aishad]

WHY are these changes introduced?

Fixes #9265
When using the Modal component, the Footer padding should be consistent with the Header and Section padding.

WHAT is this pull request doing?

Add paddingInlineStart="5" and paddingInlineEnd="5" to Box in Footer component to match padding for Header and Section in the Modal component.

Before

After

How to 🎩

Spin link: Open any modal, for example go to admin/customers and click Import customers to view the spacing in the footer of the modal.

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

import React from 'react';

import {Page, Modal} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Modal
        open
        onClose={() => {}}
        title="Reach more shoppers with Instagram product tags"
        primaryAction={{
          content: 'Add Instagram',
          onAction: () => {},
        }}
        secondaryActions={[
          {
            content: 'Learn more',
            onAction: () => {},
          },
        ]}
        footer="Testing spacing in the footer."
      >
        <Modal.Section>
          <p>
            Use Instagram posts to share your products with millions of people.
            Let shoppers buy from your store without leaving Instagram.
          </p>
        </Modal.Section>
      </Modal>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes (N/A)
• Tophatted documentation changes in the style guide (N/A)

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	243.03 KB (0%)
polaris-react-esm	157.33 KB (+0.01% 🔺)
polaris-react-esnext	219.82 KB (+0.01% 🔺)
polaris-react-css	47.45 KB (0%)