Workaround for custom width, header and footer of Lightning Quick Action

The core of this workaround to create a quick action with greater widths than that of a standard quick action width is creating an slds-modal on top of the standard modal of quick action. through css we set the modal width and position to the center of the page.

One great advantage of going with this approach is you have great control over the header and footer of the modal, we can literally add anything on these, so this will be a great option even when you concern is not the width of the quick action.

Component:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader" access="global">
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                <lightning:buttonIcon size="large" iconName="utility:close" variant="bare" onclick="{! c.closeQuickAction }" alternativeText="Close window." class="slds-modal__close slds-button_icon-inverse"/>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                    <span>
                        Header
                    </span>
                </h2>
            </header>    
            <div class="slds-modal__content slds-p-around_medium slds-p-top_x-small" id="modal-content-id-1">
                
                Component body !!! 
                
                
            </div>    
            <footer class="slds-modal__footer">
                <lightning:button variant="brand" label="Submit" onclick="{! c.submitAction }" />
                <lightning:button variant="neutral" label="Cancel" onclick="{! c.closeQuickAction }" />
            </footer>
        </div>
    </section>
</aura:component>

Client Side controller:
({
    closeQuickAction : function(cmp, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    }
})

Component css:
.THIS.slds-modal {
    width: 190%;
    left: -45%;
}
.THIS.slds-modal:focus {
    outline: none !important;
}
.THIS .slds-modal__content {
    min-height: 16rem;
}
.THIS .slds-modal__container{
    width:100%;
}

Steps:

1. Create a component with above code 

2. Create a lightning component action for the above component on the object you want the a quick action

3. add the button to the page layout

Little more customization of the above can make this responsive for use across desktop, tablet and mobiles.