lightning-record-form in simple modal displays all fields squished up to the left side of the dialog

Question

I am having a problem with a lightning-record-form within a modal. It all works as expected except that the fields and labels are squished up against the left-side of the dialog. I can't figure out why. I have tried changing the density attribute (comfy or compact) and it does change whether the label appears above or to right of the field but everything remains squished up against the left of the modal.

Here is my simple html:

<template>

   <lightning-button variant="brand"
       label="Add New Product Line Item"
       title="Add New Product Line Item"
       onclick={openModal}
       class="slds-var-m-left_x-small">
   </lightning-button>

   <template if:true={showModal}>
      <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
             <!-- Modal/Popup Box LWC header here -->
             <header class="slds-modal__header">
                 <!--<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                     <lightning-icon icon-name="utility:close"
                         alternative-text="close"
                         variant="inverse"
                         size="small" ></lightning-icon>
                     <span class="slds-assistive-text">Close</span>
                 </button>-->
                 <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create New Product and Add a Quote Line Item</h2>
             </header>
             <!-- Modal/Popup Box LWC body starts here -->
             <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
               <lightning-record-form
                  object-api-name="Product2"
                  fields={fields}
                  columns="1"
                  mode="edit"
                  onsubmit={handleSubmit}
                  oncancel={closeModal}
                  density="comfy">
               </lightning-record-form>
             </div>
         </div>
     </section>
     <div class="slds-backdrop slds-backdrop_open"></div>
   </template>
</template>

And here is my (not yet finished but working) javascript file:

import { LightningElement,track } from 'lwc';

import DESCRIPTION_FIELD from '@salesforce/schema/Product2.Description';
import STOCK_KEEPING_UNIT_FIELD from '@salesforce/schema/Product2.StockKeepingUnit';

export default class NewProductAddToQuoteLineModal extends LightningElement {
     @track showModal = false;
     
     fields = [DESCRIPTION_FIELD, STOCK_KEEPING_UNIT_FIELD, MSRP_FIELD];
    /* javaScipt functions start */ 
    openModal() {    
        console.log('opening the model now');
        this.showModal = true;
    }
 
    closeModal() {
        console.log('closing the model now');
        this.showModal = false;
    }

    handleCancel() {
        console.log('handling cancel now');
        closeModel();
    }

    handleSuccess() {
        console.log('handling success now');
        
        // do the save   
        
        closeModel();
    }

    handleError() {
        console.log('handling error now');
        
        // handle error
        
        closeModel();
    }
    /* javaScipt functions end */ 
}

Answer 1

Per Naga's comment above, I tried deploying to our dev org and it fixed the issue. I guess the local lwc server is just inconsistent in some cases.