LWC - Local Development preview in small size

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

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>

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"

}