[SalesForce] CSS to remove padding from Quick Action lightning component

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)