[META] SDDS responsive styles don't fit well within XB previews

kristen pol → credited alan.cole → .

Note that I tried to change to the following (and rebuilt XB ui) based on feedback from @alan.cole but it didn't work... it just changed the desktop area but not the slot.

const previewSizes = {
  lg: {
    height: 1080,
    width: 1920,
    name: 'Desktop',
  },
  sm: {
    height: 768,
    width: 400,
    name: 'Mobile',
  },
};

Created a companion issue in XB queue to see if we are supposed to update our CSS or they need to tweak:

💬 SDDS responsive styles don't fit well within XB desktop preview Active

Another example:

I added several child issues but I won't add anymore since perhaps all can be fixed one one approach.

You say "too big in XB's desktop preview area." Do you mean the Create Ambitious Experiences... text sizing in the mobile preview area?

Actually, it's too big in both desktop and mobile overall.

I updated the title+summary. Hopefully that's clearer.

Note there are no mobile Figma designs so we are just winging it.

Adding these for reference.

Desktop: https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---D...

Mobile: https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---D...

I can have a look at this. Is all the code in the current main 1.0.x branch?

Yes… 1.0.x is up to date.

I guess they have mobile designs now o_O those weren’t given to us 3 weeks ago when they sent the new designs over.

We just merged in a fix that was constraining the size but I haven’t tested yet. It needs to be coupled with a larger XB preview width which is being discussed in the XB issue from comment #4

I’ve been waiting n meetings for hours and need sleep so haven’t been able to test so would appreciate any help with that

There are 2 issues.

1. Experience Builder preview width is 1024W - You stated this. Need a larger preview window.
2. CT breakpoints have a mixin (ct-container) that creates a max-width for all breakpoint on the container. xxl breakpoint is 1440px with a 1248px.

1. I think this is an Experience Builder issue. Need to open an issue there.

2. Looking at this quickly, there is a lot going on, but in the layout.twig there is a {{ is_contained_class }} variable. If this was set to false then I think we would get .container-fluid class, which would be better for such a page builder or at least these components.

Maybe, you've added a fluid container.

Thanks 🙏 yes, I think that’s what was updated in the merge a bit ago. Hard to check on my phone but appreciate the additional eyes.

Additional discussion happening over here:

💬 SDDS responsive styles don't fit well within XB desktop preview Active

Updates to work with 1024 are happening in this MR along with other work:

https://git.drupalcode.org/project/demo_design_system/-/merge_requests/53

Alan and I are still working through the MR as we are doing the slots and YAML files and XB integration testing there.

This is fixed.

See screenshot: