Design comparison
Airport picker — showing all airports
Today the home-page widget scrolls, so only the four London airports show and Dublin & Milan get hidden below the fold. Below are four ways to fix that — all show every airport without scrolling and all are responsive. Each mock is rendered at the widget's real width (~380px), which is close to both the mobile full-width and the desktop hero column.
Tip: resize your browser or open this on your phone — the frames reflow just like the live widget would.
2×4 grid
Your preferenceAll eight airports as tiles in two columns. The flag on each tile shows the country. Cleanest and most scannable.
Select your airport
Grouped compact list
The familiar vertical list, slimmed down and split under region headers so all eight fit with no scroll. Smallest change from today.
Select your airport
Region tabs + list
Region pills at the top; the selected region's airports show below. London is the default, so most users see their airports instantly.
Select your airport
Grouped 2-col grid
Like your grid, but with region headers separating London / Dublin / Milan for extra clarity. A middle ground between A and D.
Select your airport
Preview only · pages/designs/airport-picker.vue · no live wiring — clicks just highlight a tile