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

Add screenshot.

Within `experience_builder/ui/src/features/layout/preview/Preview.tsx` the screen size of the Desktop is hard-coded to 1024 x 768.

The demo designs we have been building work best at 1920 x 1080 for desktop.

Would it be possible to add another preview size for 1920 x 1080, or make the preview sizes configurable?

The idea of the breakpoint has been to showcase how the site would look like at the narrowest for a specific breakpoint. I agree that the 1024px is a bit too narrow. I'm wondering if we could settle on something like 1200-1300px for the demo since 1366 x 768 is still a common laptop resolution? Alternatively, I could see if we could add a "wide desktop" breakpoint which would be ~1920px wide. This will become configurable eventually so I'm just trying to find something sensible for the meanwhile.

Thanks. Talked with Alan and the 1300px would probably require more CSS work. I can try testing this tomorrow… late here.

Changing the resolution of the viewports available in the demo is fairly easy but requires manually tweaking the canvas size and possibly updating some tests (tbc). It would be good to definitely all agree on which viewports we want before implementing.

I agree that 1024 is very small for a desktop/laptop these days but it's still a common size for iPads/tablets.

I think designing with a 1080p viewport will be challenging on anything less than a 4k screen and I'm not sure how well it would demo at that resolution.

My suggestions

For the demo:
Desktop: 1280*768
Mobile: 400*768

Medium term:
Introducing a 3rd viewport and renaming the existing one to tablet:
Desktop 1920*1080
Tablet 1024*768
Mobile: 400*768

Longer term:
Number of breakpoint viewports and each of their resolutions will be user defined/configurable.

Also, can I please clarify how the decision was reached to not build the demo SDC's responsively (to work at all resolutions)? My guess is that it was just done in the interest of speeding up development but I just want to make sure I understand correctly in case I'm making a wrong assumption there and there is not some other (technical or intent related) reason that I should be considering in future.

Thanks… I assume a speed issue given we were given the designs after already implementing the first design but I’ll let Alan follow up… he’s in Australia so that will probably not happen until his tomorrow morning .

Looking at the screenshot, it seems that besides figuring out how we'll make the demo SDCs work with the viewport width, we will need to tweak the height of the canvas. Right now it's set to a fixed value. We have ✨ [later phase] Total canvas size should be dynamic based on browser viewport size Needs review , but it was decided previously that we'll tackle that at a later phase.

There is also 🐛 The preview container height will overflow outside the canvas Needs review - perhaps that issue could be used to track/develop a temporary solution to @balintbrews's concern #8 ahead of the demo date.

Oh, great, 🐛 The preview container height will overflow outside the canvas Needs review is a more than good enough solution for now, I think. It's now merged, so we can focus on the viewport width ↔ only in this issue!

I think we're waiting for input from Alan next per @kristen pol in #7.

While we wait for Alex, let's have product owner @lauriii confirm that he expects the SDCs in https://www.drupal.org/project/demo_design_system → to come with responsive CSS.

For the demo purposes, in my opinion it would be fine to remove the mobile view if the demo design system doesn't include responsive styles 😊

The mobile view isn’t a problem. I think Wim means that he’d expect SDDS to look okay at 1200 with even though the designs were for much bigger. I don’t think we were ever told to test at smaller widths and weren’t given tablet size designs and weren’t even given mobile designs but we did a pass a mobile already. I learned yesterday that mobile designs do exist now but I don’t know if someone would have time to adjust to the designs.

So the question remains if the components should look okay at 1200. We could find someone to wing that with designs but it has to be later in the week as we are refactoring to add more sub components until tomorrow to better demonstrate the features of XB.

I was going to comment with all kinds of calculations I made about how even 1280px plus sidebars is still somewhat large to demo well on a typical laptop, but I realized it's not very helpful at this point, so I'm saving you from that. 😊

Instead, I thought I'd mention that if we really have to — maybe in combination with whatever adjustments to the SDC implementations are feasible —, we could play with setting a default zoom level in XB that is smaller than 100%. As a last resort in case we'd run out of time before the Barcelona demo.

Gotcha 👍 sounds like a promising backup plan 😎

Alan has been adjusting for 1024 today while adding more slots so we should be okay 👍

Here's what it looks like on his MR branch. Would this be okay enough for the demo? (Note, I still need update the YAML files so this isn't in the main branch yet)

Moving to needs review based on last comment.

This is what it looks like in XB right now... let me know if this is sufficient for the demo:

Had a call with Lauri and he's happy with stuff so closing this.

Looks like a lot of changes have landed over there! 🤩 Nice work! 👏