CSS to remove padding from Quick Action lightning component

Question

Edit: The main question is how to override the css of an Aura QuickActionWithoutHeader so that I can use the entire space of the window? It has too much padding so I cannot exactly reproduce the Change Owner window. You can ignore the LWC portion since I found the padding is from the system's Aura. It used to be possible using aura:html and style tag but now it has to be done in the aura bundle's css file. Please help me tweak the aura's css so that the padding disappears.

---

I am replacing the Change Owner button on a custom object. It is a Lightning Web Component (LWC) wrapped by Aura Lightning Component (LC). The LC is called by a Quick Action button. The LWC provides Cancel and Save buttons, so the Aura LC is based on QuickActionWithoutHeader. Using Visual Studio / sfdx.

The new window should look exactly like the original window, with two more checkbox options. I need to override the quick action's CSS to remove white space padding around the outside. I found examples of how to do this, but they use the old aura:html style tag which is no longer allowed. (See screenshots below)

Questions:

1. How to set up the LC's CSS file correctly? It is not getting picked up but I don't think I need to use aura:ltng since it is the lightning component bundles built-in .css file. Couldn't get aura:ltng to find it either. FWIW I deleted the slds-p-around--medium (red rectangle in source code image below) using Chrome developer tools. It did reduce the whitespace padding quite a lot though not completely. So I figure the CSS should work if I can get it connected correctly.

2. How can I match LC's height to the LWC's height? It is either too tall or a scrollbar appears when the "required" tag catches a missing mandatory field. overflow:auto as shown in the .cmp file below had no effect.

Other notes:

• If there is a way to have two buttons in QuickAction and have the Submit button send the information to the LWC that would also be fine though not so experienced with composing aura and lwc like that.
• Haven't gotten the Cancel button to work yet but am expecting it should not be too hard to figure out.. will need to sent the event from LWC to parent.

Reference: Recreate Modal Component for force:lightningQuickActionWithoutHeader

TransferMeetingNote.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,
force:hasSObjectName,force:hasRecordId,flexipage:availableForAllPageTypes">
    <div style="overflow:auto">
        <c:transferMeetingNoteLWC
            objectApiName="{!v.Contact_History__c}" 
            recordId="{!v.recordId}" 
            onclosemodal="{!c.modalClose}"
        />
    </div>
</aura:component>

TransferMeetingNote.css

.THIS .cuf-content{
    padding:0 !important;
}
.THIS .slds-p-around--medium{
    padding:0 !important;
}
.THIS .slds-modal__content{
    overflow-y:hidden !important;
    height:unset !important;
    max-height:unset !important;
}
/* Not used for now
.THIS .slds-modal__container{
    width:80% !important;
    max-width:80% !important;
} */

transferMeetingNoteLWC.js

({
    modalClose : function(component, event) {
        var closeModalEvent = event.getParam('close');
        if(closeModalEvent){
            //Apparently problematic $A.get("e.force:closeQuickAction").fire();
            var element = document.getElementsByClassName("DESKTOP uiModal forceModal");    
            element.forEach(function(e, t) {
                $A.util.addClass(e, 'slds-hide');
            });
        }
    },
})

transferMeetingNoteLWC.html

<template>
<div class="slds-grid slds-wrap">
  <div class="sdls-col slds-size_1-of-1 slds-border_bottom">
    <div class="slds-text-heading_medium slds-text-align_center slds-var-m-around_xx-small">Transfer Meeting Note</div>
  </div>

  <div class="slds-col slds-size_1-of-1 slds-border_bottom">
    <div class="slds-var-p-around_small">
        <lightning-input type="text" label="Search users..." 
            placeholder="Click here to select a user" required></lightning-input>
    </div>
    <div class="slds-var-p-around_xx-small">
            <lightning-input type="checkbox" label="Send notification" name="notification" checked></lightning-input>
    </div>
    <div class="slds-var-p-around_xx-small">
            <lightning-input type="checkbox" label="Add new owner to Attendees" name="addnew" checked></lightning-input>
    </div>
    <div class="slds-var-p-around_xx-small">
            <lightning-input type="checkbox" label="Remove previous owner from Attendees" name="removeold" checked></lightning-input>
    </div>
    <div class="slds-var-p-around_xx-small">
        &nbsp;
    </div>
  </div>

  <div class="slds-col">&nbsp;</div>
  <div class="slds-col slds-col_bump-left" >
    <div style="float:right; padding:10px;">
        <lightning-button label="Cancel" title="Do not make any changes" onclick={handleCancel} class="slds-m-left_x-small"></lightning-button>
        <lightning-button variant="brand" label="Save" title="Save changes" onclick={handleSave} class="slds-m-left_x-small"></lightning-button>  
    </div>
</div>

</div>
</template>

import { LightningElement } from 'lwc';

export default class TransferMeetingNoteLWC extends LightningElement { //TODO

    handleCancel() {
    }
    handleSave(event) {        
    }
}

Screenshots:

Original Change Owner Window

New Change Owner Window

Padding to be removed (I think) is green portion (red rectangle source)

Scrollbar appears (quick workaround: remove "required" tag)

Answer 1

So I just spend hours tackling the same problem. I have found a solution by overriding the styling hook with the following CSS in my LWC

:host {
    --lwc-spacingMedium: 0px !important;
}

Answer 2

Jannis Bott's answer affects the entire page.

Here's the solution I found. It only affects our lwc component, and only inside Aura Wrapper.

1. Create a div that covers the entire component html page

       <template>
         <div class={containerStyleClass}>
           ...
         </div>
       </template>
   

2. In Aura Wrapper send attribute to LWC

       <c:lwccomponentname ... isInAuraWrapper="true"></c:lwccomponentname>
   

3. Get the value in JS

       _isInAuraWrapper;
       @api set isInAuraWrapper(value) {
               this._isInAuraWrapper = value;
       }
       get isInAuraWrapper() {
               return this._isInAuraWrapper;
       }
       get containerStyleClass() {
               return this.isInAuraWrapper ? 'container__for_aura' : 'container';
       }
   

4. Create a CSS classes

   .container {
       ...
   }
   
   .container__for_aura {
       ...
       margin: -1rem -2rem;
       max-width: initial;
   }
   

Answer 3

Nobody answered, but I made some progress based on the hint here. However, there are some issues:

1. The sample is based on pubsub which is deprecated. You would now use Lightning Messaging System, or in my case I just included the LWC in the Aura LC and it worked.
2. It is basically overlaying two windows together. Not sure how well it would work in all browsers/devices.
3. Had to mess with centering and sizing the drop shadow which tends to take up full viewport height, though finally it worked.
4. After solving all those issues, unfortunately I found that clicking in the window caused the drop shadow class to display a bright outline.

I could not find what was causing #4 and finally based on #2 as well, decided that fighting with a changing landscape as far as how Salesforce styles their environment, and not knowing if it would work outside my own browser platform, I gave up.

My options were:

1. Build it in Aura, potentially using individual LWCs in it.
2. Accept subpar design (white padding around the window frame) but use my existing LWC which works great.
3. Make a full screen window instead of a popup..

I went with 2 but if you are starting from scratch, I'd say go with 1. In the future Salesforce may make it possible to create LWC Quick Actions since that is the whole problem.