[Clover-402][BpkCardList] Update BpkCardList scroll behaviour #3878

xiaogliu · 2025-07-11T09:04:40Z

This PR mainly focuses on changes in the "row" layout scenario on desktop:

Click and slide behavior: Originally, clicking the next page would jump to one card. After the modification, it will jump to a whole set of cards (the specific number depends on initiallyShownCards).
Card rendering: Before the modification, mobile would render all cards at once, while desktop only rendered the cards in the current view. After the modification, the rendering behavior of mobile and desktop is consistent: only render the current view + RENDER_BUFFER + already rendered cards.
Fix the carousel shakes issue
The style has been fine-tuned according to the design, and the specific modifications have been pasted into the PR code.

Remember to include the following changes:

Copilot

Pull Request Overview

This PR updates the BpkCardList’s row layout to page by full sets of cards, unify rendering logic across viewports through virtualization, and apply style tweaks to match design specs.

Click and slide now advance by the number of initiallyShownCards instead of one card.
Virtual scrolling renders only the current view plus a buffer and previously seen cards on both mobile and desktop.
SCSS adjustments refine overflow behavior, padding, and responsive sizing at breakpoints.

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/bpk-component-card-list/src/common-types.ts	Removed `setCurrentIndex` prop since carousel state is now internal.
packages/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx	Dropped unused `useUpdateCurrentIndexByVisibility` hook.
packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.tsx	Recalculated page count, renamed variables, and stopped passing the state setter into the carousel.
packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx	Added virtual-scrolling logic, refactored ref callbacks, removed legacy visibility hook.
packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss	Locked desktop overflow, added mobile-only scroll and sizing breakpoints.
packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel-test.tsx	Updated mocks to reflect removed hook and refactored test setup.
packages/bpk-component-card-list/src/BpkCardList.tsx	Introduced separate defaults for mobile and desktop initial card counts.
packages/bpk-component-card-list/src/BpkCardList.module.scss	Added mobile-specific gap adjustments.
examples/bpk-component-card-list/examples.tsx	Cleaned up outdated props and usage comments in examples.
examples/bpk-component-card-list/examples.module.scss	Removed example-specific card `min-width` styling.

Comments suppressed due to low confidence (2)

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx:202

The aria-current attribute was removed, which may make it harder for assistive technologies to identify the currently active slide. Consider re-adding aria-current="true" on the card when it matches currentIndex.

            aria-label={slideLabel(index, childrenLength)}

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel-test.tsx:29

Tests for BpkCardListCarousel no longer cover the new virtualization logic (the renderList and buffer behavior). Consider adding tests to verify that out-of-buffer cards render as placeholders and that in-buffer cards render normally.

  useScrollToCard: jest.fn(),

Copilot · 2025-07-11T09:06:01Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

@@ -18,13 +18,14 @@
 import type { CSSProperties } from 'react';
 import { useRef, useState, useEffect, isValidElement, Children } from 'react';

+import throttle from 'lodash/debounce';


The code imports throttle from 'lodash/debounce', which actually provides a debounce function. Update this to import throttle from 'lodash/throttle' or rename the import if debounce semantics were intended.

Suggested change

import throttle from 'lodash/debounce';

import throttle from 'lodash/throttle';

Copilot · 2025-07-11T09:06:01Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss

    box-sizing: border-box;
    gap: tokens.bpk-spacing-sm();
    scroll-snap-stop: always;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

+    @include breakpoints.bpk-breakpoint-mobile {
+      overflow-x: scroll;


[nitpick] There are two separate @include breakpoints.bpk-breakpoint-mobile blocks that could be consolidated to reduce duplication and simplify the stylesheet.

Suggested change

overflow-x: scroll;

overflow-x: scroll;

&__card {

&:first-child {

padding-left: tokens.bpk-spacing-sm();

@include utils.bpk-rtl {

padding-right: tokens.bpk-spacing-sm();

padding-left: tokens.bpk-spacing-md();

}

}

flex: 0 0

calc(

(

100% -

(

tokens.bpk-spacing-md() *

(var(--initially-shown-cards, 3) - 1)

)

) /

(var(--initially-shown-cards, 3) - 0.5)

);

}

skyscanner-backpack-bot · 2025-07-11T09:10:07Z

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

skyscanner-backpack-bot · 2025-07-11T09:12:41Z

	Warnings
⚠️	Package source files (e.g. `packages/package-name/src/Component.js`) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 9f8b1c0

xiaogliu · 2025-07-11T09:08:11Z

examples/bpk-component-card-list/examples.tsx

@@ -152,7 +151,6 @@ const snippetProps = {
 };

 const DestinationCard = (i: number) => (
-  // Usage Suggestion: define minWidth from consumer side by using className


The Card width is determined by the number of cards set to be displayed (desktop, mobile), so the minWidth cannot be specified, otherwise it will conflict with initiallyShownCardsDesktop/initiallyShownCardsMobile.

xiaogliu · 2025-07-11T09:08:40Z

packages/bpk-component-card-list/src/BpkCardList.module.scss


 .bpk-card-list {
  display: flex;
  flex-direction: column;
  gap: tokens.bpk-spacing-lg();

+  @include breakpoints.bpk-breakpoint-mobile {
+    gap: tokens.bpk-spacing-base();


Based on design, if mobile gap change to tokens.bpk-spacing-base()

xiaogliu · 2025-07-11T09:09:20Z

packages/bpk-component-card-list/src/BpkCardList.tsx

@@ -34,7 +34,8 @@ import STYLES from './BpkCardList.module.scss';

 const getClassName = cssModules(STYLES);

-const DEFAULT_ITEMS = 3;
+const DEFAULT_ITEMS_DESKTOP = 3;
+const DEFAULT_ITEMS_MOBILE = 2;


Based on design DEFAULT_ITEMS_MOBILE be 2 makes more sense.

xiaogliu · 2025-07-11T09:16:04Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss


 .bpk-card-list-row-rail {
  &__row,
  &__rail {
    display: flex;
    padding-top: tokens.bpk-spacing-sm();
    padding-bottom: tokens.bpk-spacing-sm();
-    overflow-x: scroll;
+    overflow-x: hidden;


In desktop, scroll card by wheel/touchpad will change currentIndex, And pagination will also change the currentIndex. It is rather difficult to keep the two in perfect synchronization, and the functionality is redundant with that of pagination so disable this feature.

xiaogliu · 2025-07-11T09:18:05Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss

    &::-webkit-scrollbar {
      display: none;
    }

    &__card {
      position: relative;
-      padding: tokens.bpk-spacing-md();
+      padding: 0 tokens.bpk-spacing-md();


It's parent element already set padding top/bottom, if add padding top/bottom here, will cause spacing much big than design.

xiaogliu · 2025-07-11T09:19:41Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss

+
+      @include breakpoints.bpk-breakpoint-mobile {
+        &:first-child {
+          padding-left: tokens.bpk-spacing-sm();


On mobile, the first card should be as close as possible to monetization. Considering the shadow, it cannot be set to 0 completely.

xiaogliu · 2025-07-11T09:20:49Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss

+                      (var(--initially-shown-cards, 3) - 1)
+                  )
+              ) /
+              (var(--initially-shown-cards, 3) - 0.5)


0.5 means that when on mobile, half of the last card in the visible area will be hidden.

xiaogliu · 2025-07-11T09:22:29Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

+    cardRefs.current[index] = el;
+    observerVisibility(el, index);
+    setA11yTabIndex(el, index, visibilityList);
+    // record the first card's width and height when it becomes visible


The width and height of all cards in the Cardlist are consistent, including the placeholders for unrendered cards.

xiaogliu · 2025-07-11T09:26:05Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

+        }
+
+        // Only render cards that are within the renderList range or have been visible before
+        if (renderList[index] !== 1 && !hasBeenVisibleRef.current.has(index)) {


If the current card has not entered the visible area, replace it with an empty element. The empty element should be consistent with the card width/height to avoid reflow.

xiaogliu · 2025-07-11T09:27:26Z

packages/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx

-  openSetStateLockTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>,
-) => {
-  useEffect(() => {
-    if (isMobile) return; // No pagination on mobile, so no need to update the current index


https://github.com/Skyscanner/backpack/pull/3878/files#r2200174759

skyscanner-backpack-bot · 2025-07-15T03:06:22Z

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

Faye-Xiao · 2025-07-15T03:10:38Z

examples/bpk-component-card-list/examples.module.scss

-.bpk-card {
-  min-width: tokens.$bpk-one-pixel-rem * 250;
-}
-


packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

Faye-Xiao · 2025-07-15T03:57:37Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

@@ -69,10 +73,44 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
  const openSetStateLockTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  const observerVisibility = useIntersectionObserver(


I took a quick look at the useIntersectionObserver hook. It lacks the disconnect logic.
Could you help add that for this hook? 🙇‍♀️

backpack/packages/bpk-component-card-list/src/BpkCardListRowRail/utils.tsx

Lines 116 to 168 in 15273e9

export const useIntersectionObserver = (

{ root, threshold }: IntersectionObserverInit,

setVisibilityList: React.Dispatch<React.SetStateAction<number[]>>,

) => {

const callbackRef = useRef(setVisibilityList);

useEffect(() => {

callbackRef.current = setVisibilityList;

});

const observeAll = useMemo<

(element: HTMLElement | null, index: number) => void

>(() => {

if (!root) return () => {};

const observer = new IntersectionObserver(

(entries) => {

entries.forEach((entry) => {

const { index } = (entry.target as HTMLElement).dataset;

if (!index) return;

const currentIndex = parseInt(index, 10);

if (entry.isIntersecting) {

setVisibilityList((prevList) => {

const newList = [...prevList];

newList[currentIndex] = 1;

return newList;

});

} else {

setVisibilityList((prevList) => {

const newList = [...prevList];

newList[currentIndex] = 0;

return newList;

});

}

});

},

{ root, threshold },

);

const observeElement = (element: HTMLElement | null, index: number) => {

if (element && observer) {

element.setAttribute('data-index', index.toString());

observer.observe(element);

}

};

return observeElement;

}, [root, threshold]);

return observeAll;

};

updated in 153ff48

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

Faye-Xiao · 2025-07-15T06:26:17Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

+      : 0,
+  );
+
+  const cardRefCallback = (index: number) => (el: HTMLDivElement | null) => {


Nit: The cardRefCallback generates a closure inside .map as each render will return a new ref callback for each card while it's given to each element in the return function: ref={cardRefCallback} .
Maybe we can use a single callback + data-index way like the ImageGallery does in banana, or use useMemo to pre-generate a callback array.

const cardRefFns = useMemo( () => Array(childrenLength).fill(null).map((_, i) => (n: HTMLElement|null) => { cardRefs.current[i] = n; }), [childrenLength], ); ... ref={cardRefFns[index]}

Both methods allow the same callback instance to be reused for the same index, avoiding unnecessary function creation and cleanup.

Faye-Xiao · 2025-07-15T07:05:04Z

packages/bpk-component-card-list/src/common-types.ts

@@ -102,7 +102,6 @@ type CardListCarouselProps = {
  initiallyShownCards: number;
  layout: typeof LAYOUTS.row | typeof LAYOUTS.rail;
  currentIndex: number;
-  setCurrentIndex: Dispatch<SetStateAction<number>>;


The setCurrentIndex function has been removed from CardListCarouselProps, but RowRailContainer is still updating the index using an internal state along with the PageIndicator. Currently, there is no way to pass the visible page number back to the container between components. Is this the expected behavior? 🤔

I’m considering a couple of use cases: for instance, when opening a link, the page should display a specific index card, but the current component can't achieve that. Additionally, for the New Relic operational event, we need to track the index of the displayed card.

I believe it would be best to maintain a dual mode of controlled and uncontrolled states with currentIndex and onIndexChange. Otherwise, adding these functionalities back later could compromise API stability.

Currently, there is no way to pass the visible page number back to the container between components. Is this the expected behavior?

Based on the previous implementation, this is expected. Passing setCurrentIndex to BpkCardListCarousel was for useUpdateCurrentIndexByVisibility, but we no longer need this logic.

I’m considering a couple of use cases: for instance, when opening a link, the page should display a specific index card, but the current component can't achieve that. Additionally, for the New Relic operational event, we need to track the index of the displayed card.

This is a valid concern. In fact, we've already received feedback to trigger events. But I think this is related to changing the API. However, before that, we should review the current cardlist again to see which callback functions we need to pass out. For example, besides onIndexChange and onFilterChange, should we also expose them? I suggest that we make unified modifications to the API after the discussion. This PR only fixes the current problems in CardList and does not change any API.

This PR only fixes the current problems in CardList and does not change any API.

That makes sense!

And don't forget this 👇

However, before that, we should review the current cardlist again to see which callback functions we need to pass out

Faye-Xiao · 2025-07-15T07:14:06Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx

            key={`carousel-card-${index.toString()}`}
            role="group"
            aria-label={slideLabel(index, childrenLength)}
-            aria-current={index === currentIndex ? 'true' : 'false'}


🤔 why do we remove this?

By the way,
@gert-janvercauteren could you help review the a11y of the BpkCardList component? 🙇‍♀️

Since multiple cards can be displayed on one screen currently and these cards have no primary or secondary distinctions (for example, three cards are displayed on one screen and all three are equally important), the current aria-current is not accurate: it only marks the first one, but there are three "current" ones. If aria-current is added to all three actually displayed pictures, multiple "current" designations will also cause confusion.

But love to discuss more.

Removing this is ok, aria-current="page" can be used on the pagnation dots, but not on a single slide :D

…nto fix-cardlist-issue

skyscanner-backpack-bot · 2025-07-16T11:52:42Z

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

skyscanner-backpack-bot · 2025-07-17T06:34:40Z

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

skyscanner-backpack-bot · 2025-07-17T06:40:30Z

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

Faye-Xiao · 2025-07-17T10:44:57Z

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

Hi @xiaogliu, I compared this storybook with the production storybook cases and found some visual differences, as the below screenshots show. Are these changes what we expected?

Faye-Xiao · 2025-07-17T11:13:34Z

Also found another issue. The cards in the third-to-last cardlist in the multi-components-scrolling-test on mobile breakpoints(small and larger mobile, look good on tablet) use case have a larger width. 🤔

Production existing use case

cardlist-production.mov

Use case in this PR

cardlist-pr.mov

Faye-Xiao · 2025-07-17T11:41:02Z

examples/bpk-component-card-list/examples.tsx

@@ -129,7 +129,6 @@ const commonProps = {
  ),
  buttonContent: 'See more',
  buttonHref: 'https://www.skyscanner.net/',
-  initiallyShownCardsMobile: 2,


You removed this value, but I saw there is an example of giving initiallyShownCardsMobile : 1.
Forget to update other exmaples?

backpack/examples/bpk-component-card-list/examples.tsx

Line 334 in e55c824

initiallyShownCardsMobile={1}

I removed it here is because I change mobile default initiallyShownCardsMobile be 2, consistent with design, so need to pass 2.

But in

backpack/examples/bpk-component-card-list/examples.tsx

Line 334 in e55c824

initiallyShownCardsMobile={1}

this case, we want to test different initial cards so still keep it.

skyscanner-backpack-bot · 2025-07-18T03:48:39Z

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

xiaogliu · 2025-07-18T03:58:04Z

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

Hi @xiaogliu, I compared this storybook with the production storybook cases and found some visual differences, as the below screenshots show. Are these changes what we expected?

Hey @Faye-Xiao This comment contains two issues:

The content displayed on the last card in the mobile visible area has become larger, which is as expected. Below is the design.
Before the change, we could only be hardcoded, so you maybe see different width for last in different screen.
After change, I calculated with a ratio of 100. Currently, I've set it to 0.5, but it would be more appropriate to change it to 0.8 (the width of the last card shown is less than 50%, so it can only be estimated)

When there is only one mobile card, its width becomes larger. This was a bug and has been fixed, if only one card in the viewport, set the width be 100%.

skyscanner-backpack-bot · 2025-07-18T04:11:40Z

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

Faye-Xiao · 2025-07-18T06:02:32Z

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss

+                  )
+              ) /
+              max(1, (var(--initially-shown-cards, 3) - 0.8))
+          );


Could you explain the key numbers in this code and provide a note to help others understand it for future iterations? 🙇‍♀️

skyscanner-backpack-bot · 2025-07-18T07:49:04Z

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

skyscanner-backpack-bot · 2025-07-18T07:59:24Z

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

Faye-Xiao · 2025-07-18T10:36:27Z

Approved the Percy failure as the cardlist case change is what we expected while other change are flaky tests.

Faye-Xiao

LGTM. 🚀
During the review and discussion, we also identified some other improvements outside of this PR scope. Will improve that in other PRs.

xiaogliu added 9 commits July 9, 2025 13:50

one tap and scroll whole section

36eaa5c

uncomment useUpdateCurrentIndexByVisibility

0b77061

add lazy load component

6f9f6b3

refactor lazy load logic

dd1482c

disable wheel and touchmove when indicator show up

97e4a01

optimize card dimensions

4d28c49

adjust mobile style based on figma and remove useless code

ce423ef

update default shown items

09e0133

add types

ba9c39d

xiaogliu requested a review from Copilot July 11, 2025 09:04

Copilot AI reviewed Jul 11, 2025

View reviewed changes

xiaogliu commented Jul 11, 2025

View reviewed changes

xiaogliu added the minor Non breaking change label Jul 14, 2025

Merge branch 'main' into fix-cardlist-issue

2b3bcd7

Faye-Xiao reviewed Jul 15, 2025

View reviewed changes

examples/bpk-component-card-list/examples.module.scss

.bpk-card {

min-width: tokens.$bpk-one-pixel-rem * 250;

}

Copy link

Contributor

Faye-Xiao Jul 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Faye-Xiao reviewed Jul 15, 2025

View reviewed changes

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx Outdated Show resolved Hide resolved

Faye-Xiao reviewed Jul 15, 2025

View reviewed changes

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx Outdated Show resolved Hide resolved

Faye-Xiao reviewed Jul 15, 2025

View reviewed changes

xiaogliu added 2 commits July 16, 2025 19:13

optimize code based on comment

fbb380b

Merge branch 'fix-cardlist-issue' of github.com:Skyscanner/backpack i…

13f1c47

…nto fix-cardlist-issue

xiaogliu added 2 commits July 17, 2025 14:29

fix css sequence

1875386

revert observe threshold to 0.5

9846376

Faye-Xiao reviewed Jul 17, 2025

View reviewed changes

update css for only show 1 mobile card in the viewport

9df07f2

adjust last card shown ratio

63dd429

Faye-Xiao reviewed Jul 18, 2025

View reviewed changes

add disconnnect for observerRef

153ff48

add comment when calculate mobile card width

9f8b1c0

Faye-Xiao approved these changes Jul 18, 2025

View reviewed changes

xiaogliu merged commit af8490c into main Jul 21, 2025
10 checks passed

xiaogliu deleted the fix-cardlist-issue branch July 21, 2025 06:31

	import throttle from 'lodash/debounce';
	import throttle from 'lodash/throttle';

		@@ -69,10 +73,44 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
		const openSetStateLockTimeoutRef = useRef<NodeJS.Timeout \| null>(null);

		const observerVisibility = useIntersectionObserver(

	export const useIntersectionObserver = (
	{ root, threshold }: IntersectionObserverInit,
	setVisibilityList: React.Dispatch<React.SetStateAction<number[]>>,
	) => {
	const callbackRef = useRef(setVisibilityList);

	useEffect(() => {
	callbackRef.current = setVisibilityList;
	});

	const observeAll = useMemo<
	(element: HTMLElement \| null, index: number) => void
	>(() => {
	if (!root) return () => {};
	const observer = new IntersectionObserver(
	(entries) => {
	entries.forEach((entry) => {
	const { index } = (entry.target as HTMLElement).dataset;
	if (!index) return;

	const currentIndex = parseInt(index, 10);

	if (entry.isIntersecting) {
	setVisibilityList((prevList) => {
	const newList = [...prevList];
	newList[currentIndex] = 1;
	return newList;
	});
	} else {
	setVisibilityList((prevList) => {
	const newList = [...prevList];
	newList[currentIndex] = 0;
	return newList;
	});
	}
	});
	},

	{ root, threshold },
	);

	const observeElement = (element: HTMLElement \| null, index: number) => {
	if (element && observer) {
	element.setAttribute('data-index', index.toString());
	observer.observe(element);
	}
	};

	return observeElement;
	}, [root, threshold]);

	return observeAll;
	};

[Clover-402][BpkCardList] Update BpkCardList scroll behaviour #3878

[Clover-402][BpkCardList] Update BpkCardList scroll behaviour #3878

Uh oh!

Conversation

xiaogliu commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Jul 11, 2025

Uh oh!

skyscanner-backpack-bot bot commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Jul 15, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Faye-Xiao Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Jul 16, 2025

Uh oh!

skyscanner-backpack-bot bot commented Jul 17, 2025

Uh oh!

skyscanner-backpack-bot bot commented Jul 17, 2025

Uh oh!

Faye-Xiao commented Jul 17, 2025

Uh oh!

xiaogliu commented Jul 11, 2025 •

edited

Loading

skyscanner-backpack-bot bot commented Jul 11, 2025 •

edited

Loading

Faye-Xiao Jul 15, 2025 •

edited

Loading

xiaogliu commented Jul 18, 2025 •

edited

Loading