LWC - Local Development preview in small size

Question

I just start exploring Local LWC development. The component preview is so small and it is showing the middle on the screen. Is there any workaround to increase the width and height of component by default.

    <template>
      <lightning-card title="Hello">
        <lightning-button label="New" slot="actions"></lightning-button>
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        <p slot="footer">Card Footer</p>
      </lightning-card>
    </template>

Answer 1

For local dev I generally always wrap the component I am developing into a "testing" LWC parent component. This lets you pass it parameters and generally interact with it as if it is sitting within your application.

To make it take up the whole area wrap your component with a DIV set to class "slds-grid_frame" in a parent testing LWC. This lets you view it full screen (or a controlled size) without modifying your actual component.

Code for parent testing LWC that wraps your component.

<template>
    <div class="slds-grid_frame">
        <c-your-component></c-your-component>
    </div>
</template>

Answer 2

Not exact answer, but adding anyway as searching for small viewport size directs here. My issue is that there wasn't enough space for component making it kinda useless. Thanks to Chuck Liddell for idea of using Chrome's overrides which I've detailed a bit more here - https://github.com/forcedotcom/lwc-dev-server-feedback/issues/18#issuecomment-736839151

Answer 3

Here is the solution I've came across using flexipageRegionWidth. This doesn't conflict with your org when deployed.

template

<template>
 <div class={flexipageRegionWidth}>
 </div>
</template>

css

.CLASSIC {
  min-width: 66rem;
}
.LARGE {
  min-width: 40rem;
}
.SMALL {
  min-width: 15rem;
}

js

import { LightningElement, api } from "lwc";

export default class LibsD3 extends LightningElement {
  @api flexipageRegionWidth = "CLASSIC"

}