Component layout is not consistent with Salesforce org

[jeffhube]

Describe the bug I have a lightning web component that I embed in a tab using an aura component wrapper. When I open the tab in the Salesforce org, my LWC expands to use all available width. When I view the LWC using the local development server, it uses as little width as possible. It would be nice if the layout was consistent with the Salesforce org.

To Reproduce fooWrapper aura component

<aura:component implements="force:appHostable">
    <c:foo />
</aura:component>

foo lightning web component

<template>
    <div style="background-color:red">foo</div>
</template>

Expected behavior On the local development server, components should expand to use all available width, as they do in the Salesforce org.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 77.0.3865.90

[KrisGraySFDC]

When you write a component, we don't know where you intend to use that component. Lightning Experience? Communities? In your own application?

This concept is one we're calling containers. We want to give you the ability to have previews which apply to the different types of containers.

Thats what we'll use to make the preview more consistent with the context you'll be developing for.

We probably won't be making the current preview type width 100%.

[muenzpraeger]

I second that we need an option to control the width or else. With advanced layouting the current implementation is not sufficient.

[yasso1am]

@KrisGraySFDC

We want to give you the ability to have previews which apply to the different types of containers.

I would argue if this is the case, then there should absolutely be a default 100% parent width on the preview container. When I inspect element I see the parent div to my custom lwc is called localdevserver-preview_preview

If I am trying to use this sandbox as a way to preview what it would look like in multiple different types of containers, then I should be able to ask "what happens when I ask it to take up 100% of its parent," in addition to, "what happens if I say take up 500px of width." By not setting a width on the parent component, you're actually limiting our ability to preview how lwc will behave in the wild. You're forcing us to set explicit widths on our components instead of dynamic ones.

[KrisGraySFDC]

It's a good point. Though to really control your context in this way, you'll want to write a component that consumes the component you really want to preview.

[yasso1am]

@KrisGraySFDC

I'm very confused by your point. The localdevserver-preview_preview IS the component that is consuming my component that I'm previewing. Are you asking me to arbitrarily nest it inside of a component, with the random parent component getting some again, arbitrary width for my child component to adhere to? This still means I have to hard code width for the child component to respect, which defeats the purpose.

[abhinavguptas]

Ran into this issue, this thread on Salesforce Stackexchange solves the problem to some extent, but need a way to control the width.

Still, this is a big concern.

[NiharSahu07]

@KrisGraySFDC

We want to give you the ability to have previews which apply to the different types of containers.

I would argue if this is the case, then there should absolutely be a default 100% parent width on the preview container. When I inspect element I see the parent div to my custom lwc is called localdevserver-preview_preview

If I am trying to use this sandbox as a way to preview what it would look like in multiple different types of containers, then I should be able to ask "what happens when I ask it to take up 100% of its parent," in addition to, "what happens if I say take up 500px of width." By not setting a width on the parent component, you're actually limiting our ability to preview how lwc will behave in the wild. You're forcing us to set explicit widths on our components instead of dynamic ones.

[NiharSahu07]

I am facing the same issue all components, How I will solve this issue. Can anybody guide me in this matter?

[KrisGraySFDC]

There's not a great solution yet. Progress is being made on this currently but we've got a few blockers to deal with first.

[steals]

@KrisGraySFDC any progress so far?

[KrisGraySFDC]

@ntotten