no-form-factor.md

Using @salesforce/client/formFactor in SSR-able components is not the best practice(lwc/ssr/no-form-factor)

Rule details

The @salesforce/client/formFactor module defaults to a value of "Large" during SSR, regardless of the device that made the request. This can cause issues where the UI shifts once client-side rendering is complete, particularly when rendering on smaller devices. To avoid this, use CSS media queries to handle form factors and responsive images for different screen sizes.

Example of incorrect code:

import FORM_FACTOR from '@salesforce/client/formFactor';
export default class Sample extends LightningElement {
    classes = '';
    connectedCallback() {
        this.classes = FORM_FACTOR === 'small' ? 'mobile' : '';
    }
}

<template>
    <div class="{classes}">
        <div class="col-3"><!-- ... --></div>
        <div class="col-6"><!-- ... --></div>
        <div class="col-3"><!-- ... --></div>
    </div>
</template>

.col-3 {
    width: 25%;
}
.col-6 {
    width: 50%;
}
.mobile .col-3 {
    width: 100%;
}
.mobile .col-6 {
    width: 100%;
}

Example of correct code:

export default class Sample extends LightningElement {}

<template>
    <div>
        <div class="col-3"><!-- ... --></div>
        <div class="col-6"><!-- ... --></div>
        <div class="col-3"><!-- ... --></div>
    </div>
</template>

.col-3 {
    width: 25%;
}
.col-6 {
    width: 50%;
}

/* mobile */
@media (max-width: 768px) {
    [class*='col-'] {
        width: 100%;
    }
}