How to increase the width of Quick action Modal/Popup?

Hello and welcome! 😀

In this article, we shall learn how we can increase with the width of the Quick Action Modal/Popup using an unconventional method/hack. Using this, we can also increase the width of the flow screens! 😀

So without wasting any time, let’s get to it!

Step 1: Create a static CSS resource.

To begin with, we will need to create a CSS file and upload it as a static resource in our org.

CODE:

.slds-modal__container{
	width: 80% !important;
	max-width: 80% !important;
}

Step 2: Create a lightning component.

ModalWidthComponent.cmp

<aura:component implements="force:lightningQuickAction,lightning:availableForFlowScreens" >
    
    <ltng:require styles="{!$Resource.ModalWidthCSS}"/>
    
    <div class="slds-align_absolute-center">
        <div align="center" class="slds-page-header__name">
            <div class="slds-page-header__name-title">
              <h1>
                <span class="slds-page-header__title slds-truncate" >Hola Ohana! xD</span>
              </h1>
            </div>
        </div>
    </div>
</aura:component>

Step 3: Create a Quick action to call the lightning component.

Time to see it in action!

Things to keep in mind!

Every hack has a downside, and so does this one.
This CSS-hack would apply everywhere in the app once the component gets loaded/called. So every Modal (Edit record, new record, …) would take the 80% width. Also, if you have any custom components using the standard ‘slds-modal__container’ CSS class, then they will also experience the same change.