[IRN-6174] [BpkCardList] - Child components all same height

[Alex (rabisse)]

Making all the child components the same height

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[Copilot]

Pull Request Overview

This PR modifies the BpkCardList component to enable horizontal scrolling on all screen sizes and ensures child elements maintain consistent height. The changes move scrolling behavior from mobile-only to all viewports and add height constraints.

• Enable horizontal scrolling on all screen sizes (not just mobile)
• Add webkit touch scrolling support at the component level
• Ensure child elements fill the available height

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3973 to see this build running in a browser.

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3973 to see this build running in a browser.

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3973 to see this build running in a browser.

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3973 to see this build running in a browser.

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3973 to see this build running in a browser.

[skyscanner-backpack-bot]

Visit https://backpack.github.io/storybook-prs/3973 to see this build running in a browser.

[kerrie-wu]

Instead of relying on > * or hardcoding .bpk-card, could we wrap children in a neutral wrapper
(e.g. <div className="bpk-card-slot">{card}</div>). This way the CSS can safely target .bpk-card-slot without depending on the child type, which makes the rule more explicit and avoids unintended side effects.