Skip to content

Conversation

domlander
Copy link
Contributor

@domlander domlander commented Aug 12, 2025

What does this change?

Mobile:

  • Removes the dividing vertical line
  • Reduces the space between cards from 20px to 10px
  • Reduces card padding from 10px to 8px
  • Increases the horizontal padding on the carousel to 20px at the mobileLandscape breakpoint to align with the rest of the page
  • The size of the peeping card is now 32px between the mobileMedium and tablet breakpoints
  • The size of the peeping card has been increased between the mobile and mobileMedium breakpoints. It is now 150px, but this can be lower at a very small screen size, as the minimum card width is 180px.
  • In the mobile breakpoint, the height of all cards is set to 100%, bringing parity with all other breakpoints

Desktop

  • Aligns the vertical line centrally between the cards
  • The top and bottom gaps between the cards and the container is reduced from 10px to 8px

Where possible, the container is given responsibility for internal spacing.

Why?

Design tweaks

Screenshots

Chromatic diffs: https://www.chromatic.com/build?appId=63e251470cfbe61776b0ef19&number=12790

Before After
mobile mobile-before mobile-after
mobile-medium mobile-medium-before mobile-medium-after
tablet tablet-before tablet-after
desktop desktop-before desktop-after

Copy link

github-actions bot commented Aug 12, 2025

Copy link

github-actions bot commented Aug 12, 2025

@domlander domlander added run_chromatic Runs chromatic when label is applied fronts + curation labels Aug 12, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 12, 2025
background-color: ${palette('--highlights-container-separator')};
transform: translateX(-50%);
${from.tablet} {
:not(:first-child)::before {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This ::after to ::before switcheroo seems to align the vertical bar perfectly!

@domlander domlander force-pushed the doml/scrollable-highlights-design-tweaks branch from 06f78f3 to 0867eb8 Compare August 12, 2025 14:13
@domlander domlander added the run_chromatic Runs chromatic when label is applied label Aug 12, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 12, 2025
@domlander domlander force-pushed the doml/scrollable-highlights-design-tweaks branch from 0867eb8 to e00f4eb Compare August 12, 2025 16:44
@domlander domlander added the run_chromatic Runs chromatic when label is applied label Aug 12, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 12, 2025
@domlander domlander force-pushed the doml/scrollable-highlights-design-tweaks branch from e00f4eb to 80387ec Compare August 12, 2025 16:52
@domlander domlander added the run_chromatic Runs chromatic when label is applied label Aug 12, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 12, 2025
@domlander domlander marked this pull request as ready for review August 12, 2025 17:00
@domlander domlander requested a review from abeddow91 August 12, 2025 17:00
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@domlander domlander merged commit c401707 into main Aug 14, 2025
32 checks passed
@domlander domlander deleted the doml/scrollable-highlights-design-tweaks branch August 14, 2025 06:19
@prout-bot
Copy link

Seen on PROD (merged by @domlander 7 minutes and 51 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants