Workaround - Increase Width of a Specific LWC Quick Action Modal Salesforce

Few months back I have created a video on how you may use Lightning Web Component Quick Action in Salesforce.

After that I created a blog on increasing the width of that Quick Action Modal by overriding the standard CSS.

Link : https://www.salesforcebolt.com/2021/08/increase-size-width-of-lightning-web.html

That's working as expected, the only problem is with overriding css is that once it's loaded it will override other similar css also in the org.

For example if you are having 3 LWC Quick Actions in your org and one of them is having the custom css overriding functionality in it. So once you will open that Quick Action, it will load the css and the remaining 2 QA will also have the same css.

To avoid this issue and use custom css in a specific LWC Quick Action I have created this workaround. To do that we will create a custom LWC with modal header, body and footer and then embed it in an Aura Component.

And then the Aura Component will contain the custom css for that specific modal.

Please follow below code :

QuickActionLWCWidth.html

<template>
  <header class="slds-modal__header">
    <h2 id="modalheading" class="slds-modal__title slds-hyphenate">
      I am header
    </h2>
  </header>
  <p>I am body content</p>
  <footer class="slds-modal__footer">
    <lightning-button
      variant="neutral"
      label="Cancel"
      onclick={closeAction}
    ></lightning-button>
    <lightning-button
      variant="Brand"
      label="Save"
      onclick={handleSave}
    ></lightning-button>
  </footer>
</template>

QuickActionLWCWidth.js

import { LightningElement, api } from "lwc";

export default class QuickActionLWCWidth extends LightningElement {
  @api recordId;
  closeAction() {
    const closeModalEvent = new CustomEvent("modalclose");
    this.dispatchEvent(closeModalEvent);
  }
  handleSave() {
    const closeModalEvent = new CustomEvent("modalclose");
    this.dispatchEvent(closeModalEvent);
  }
}

QuickActionLWCWidth.js-metaxml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

QuickActionLWCWidthAura.cmp

<aura:component
  implements="force:lightningQuickActionWithoutHeader,force:hasRecordId"
>
  <aura:html tag="style">
    .cuf-content { padding: 0 0rem !important; } .slds-p-around--medium {
    padding: 0rem !important; } .slds-modal__content{ height:unset !important;
    max-height:unset !important; } .slds-modal__container{ max-width:80rem
    !important; width:80% !important; }
  </aura:html>
  <aura:attribute name="recordId" type="Id"></aura:attribute>
  <c:quickActionLWCWidth
    tracker="aura"
    recordId="{!v.recordId}"
    onmodalclose="{!c.handleClose}"
  ></c:quickActionLWCWidth>
</aura:component>

QuickActionLWCWidthAuraController.js

({
  handleClose: function (component, event, helper) {
    $A.get("e.force:refreshView").fire();
    $A.get("e.force:closeQuickAction").fire();
  }
});

Output