[IRN-6177] [BpkCardList] Fix issue with carousel alignment

[Jimmy cook (jimmycook)]

This change is to address the issues with alignment when using row to rail.

There are a few concerns:

• Drop shadows on cards getting cut off
• Ensuring the width of the cards is correct
• Where is the edge of the container

This change fixes is by when we are in the row state, we can have negative margin equal to the padding on the cards, and adjust the flex basis of the cards to fill the space correctly.

Because of the peaking on the cards, we set margin-inline-end be 0 and in this way, both right and left spacing are not changed and still keep as 1 rem on mobile

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 fixes carousel alignment issues in BpkCardList when using row-to-rail mode. The changes address problems with drop shadows being cut off, incorrect card widths, and container edge positioning.

• Simplified the flex-basis calculation for mobile breakpoints
• Added specific styling for row mode with negative margins and proper flex-basis calculations
• Maintained existing rail mode behavior without the alignment fixes

---

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

[Copilot]

The flex-basis calculation is incomplete. The original code had flex: 0 0 followed by the calc() expression, but now only flex-basis is specified without the flex-grow and flex-shrink values. This could affect the layout behavior.

Suggested change

	flex-basis: calc(
	flex: 0 0 calc(

[Copilot]

The multiplication should use proper SCSS syntax. Use calc(-1 * #{tokens.bpk-spacing-md()}) or -#{tokens.bpk-spacing-md()} instead of the current expression.

Suggested change

	margin-inline: -1 * tokens.bpk-spacing-md();
	margin-inline: -#{tokens.bpk-spacing-md()};

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[Xiaoguang Liu (xiaogliu)]

Because of the peaking on the cards, we don't apply this to rail mode, so it only fixes the issue on desktop.

Hey Jimmy cook (@jimmycook) Can you explain this more? I think we can also fix this on mobile and I tested locally it works well, I also raised a commit to change that. Storybook is here https://backpack.github.io/storybook-prs/4004/?path=/story/bpk-component-card-list--row-to-rail

Can you have a look if it works? If it works, we can approve and merge it. Otherwise, I'll revert that commit.

[skyscanner-backpack-bot]

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

[Jimmy cook (jimmycook)]

Because of the peaking on the cards, we don't apply this to rail mode, so it only fixes the issue on desktop.

Hey Jimmy cook (@jimmycook) Can you explain this more? I think we can also fix this on mobile and I tested locally it works well, I also raised a commit to change that. Storybook is here https://backpack.github.io/storybook-prs/4004/?path=/story/bpk-component-card-list--row-to-rail

Can you have a look if it works? If it works, we can approve and merge it. Otherwise, I'll revert that commit.

Good suggestion but I think we have a problem

As you're scrolling you get some weird cropping on this. I think we should revert that PR for now if it lets us merge the initial change here

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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