Incorrect XL breakpoint in Olivero

Yes, elements changing at breakpoint 1200px rather than 1300px. I have attached a screen recording for the same. Thanks for the patch.

Moving to RTBC.

Random failure. Moving to RTBC again.

Just re-rolled the patch.

That was a random failure in patch #3, no need to re-roll @djsagar. It still passes the CI test. And patch #3, #14 look the same, try to attach interdiff while re-rolling.

Back to RTBC as per #8

Improving the title a bit.

It seems like the breakpoints directly map to what's in core/themes/olivero/css/base/variables.pcss.css. Maybe we need to improve documentation or rewise the breakpoints to add clarity on the purpose of the different breakpoints?

Just Re-roll the patch 9.3.x

No reroll was required, #14 and #22 are identical.

Looks good to me

@Sakthivel M, removing credit for uploading an identical patch.

This is tagged "Needs subsystem maintainer review", let's wait on that response before sending this to a committer.

Created patch for Drupal 10.1.x version.

Patch #30 applied successfully on Drupal 10.1.x. Refer to screenshots.

Breakpoint @media (--xl) is used in

/* Ensure that image doesn't overlap sidebar. */
.sidebar-grid .wide-image {
  @media (--lg) {
    width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
  }

  @media (--xl) {
    width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
  }
}

Other than that, we're not using this breakpoint.

As @lauriii points out in #19, the breakpoints line up between the breakpoints.yml and the media-queries.pcss.css files

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

@custom-media --sm (min-width: 500px);
@custom-media --md (min-width: 700px);
@custom-media --lg (min-width: 1000px);
@custom-media --xl (min-width: 1300px);

/* Navigation related breakpoints */
@custom-media --nav-md (min-width: 500px);
@custom-media --nav (min-width: 1200px);
@custom-media --max-nav (max-width: 1200px);

/* Grid related breakpoints */
@custom-media --grid-md (min-width: 700px);   /* Grid shifts from 6 to 14 columns. */
@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */

olivero.sm:
  label: Small
  mediaQuery: 'all and (min-width: 500px)'
  weight: 0
  multipliers:
    - 1x
olivero.md:
  label: Medium
  mediaQuery: 'all and (min-width: 700px)'
  weight: 1
  multipliers:
    - 1x
olivero.lg:
  label: Large
  mediaQuery: 'all and (min-width: 1000px)'
  weight: 2
  multipliers:
    - 1x
olivero.xl:
  label: X-Large
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 3
  multipliers:
    - 1x
olivero.nav-md:
  label: Nav Medium
  mediaQuery: 'all and (min-width: 500px)'
  weight: 4
  multipliers:
    - 1x
olivero.nav:
  label: Nav
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 5
  multipliers:
    - 1x
olivero.grid-md:
  label: Grid Medium
  mediaQuery: 'all and (min-width: 700px)'
  weight: 6
  multipliers:
    - 1x
olivero.grid-max:
  label: Grid Max
  mediaQuery: 'all and (min-width: 1440px)'
  weight: 7
  multipliers:
    - 1x

While the 1200px breakpoint is used more frequently, I dont know that I agree we need to change the XL to match the nav breakpoint. Is there a UX or design argument to making this change other than there being a lesser-used breakpoint 100px away from a more commonly used breakpoint?

Just wanted to follow up if anyone has a response for #34 before closing.

Since there's been no follow up, going to close out. if still an issue in D11 please re-open addressing #34