Lightning Components as Quick Actions in Salesforce1 and padding

Since Winter 17 we have had the option of using a Using Lightning Component as a Quick Action. In the Lightning Experience in a desktop browser the component is shown as a popup (actually a lightbox) in the UI and in Salesforce1 (the Salesforce mobile app) it’s more of a modal fullscreen dialog. All this is great. Only thing you have to do is to make your component implement force:lightningQuickAction (all declaratively) and it can be added as a Quick Action. The resulting lightbox / dialog will have a header with the action name and a default Cancel button to close the dialog. Again great but what if you want to name the button something else? Or if you need a custom header? Well there is another interface for this called force:lightningQuickActionWithoutHeader. So far so good. The issue is that while this removes the default header and buttons it doesn’t quite cut it in Salesforce1 as the container will still add a default margin around the component. Bummer…

The only way I found to fix this in the component I’m doing now is to add a negative martin on the component itself thereby hacking the UI. The added style is in bold – there is a negative margin to push the UI out of bounds to appear at 0,0 and a width and a height to make sure the header bar looks correctly. I’ve reported this internally and I hope someone will come up with a fix e.g. a new interface to add this explicitly.

<aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader">
    
style="margin: -20px 0 0 -20px; width: 120%; height: 50px"> Back Contact Sync
UI body...
</aura:component>