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

Created on 8 September 2024, 4 months ago
Updated 11 September 2024, 3 months ago

Overview

Need help here please :)

Are we supposed to adjust our CSS to handle this or is this to be "fixed" on the XB side?

๐Ÿ› [META] SDDS responsive styles don't fit well within XB desktop preview Active

Proposed resolution

TBD

User interface changes

SDDS components fit well within XB.

๐Ÿ’ฌ Support request
Status

Fixed

Component

Page builder

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Kristen Pol
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

    Add screenshot.

  • ๐Ÿ‡ฆ๐Ÿ‡บAustralia alan.cole

    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?

  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

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

  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom jessebaker

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

    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 .

  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands balintbrews Amsterdam, NL

    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.

  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom jessebaker

    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.

  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands balintbrews Amsterdam, NL

    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!

  • Assigned to lauriii
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    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.

  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland

    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 ๐Ÿ˜Š

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

    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.

  • ๐Ÿ‡ณ๐Ÿ‡ฑNetherlands balintbrews Amsterdam, NL

    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.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

    Gotcha ๐Ÿ‘ sounds like a promising backup plan ๐Ÿ˜Ž

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

    Alan has been adjusting for 1024 today while adding more slots so we should be okay ๐Ÿ‘

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

    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)

  • Status changed to Needs review 3 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

    Moving to needs review based on last comment.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

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

  • Issue was unassigned.
  • Status changed to Fixed 3 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States Kristen Pol Santa Cruz, CA, USA

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

  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Looks like a lot of changes have landed over there! ๐Ÿคฉ Nice work! ๐Ÿ‘

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024