I am facing an issue with the actions(Show Details, Delete). The Action dropdown is hidden inside the table instead of showing all actions. PFB screenshot. Did anyone face this issue?

Below screenshot is taken from standard Account Recent view. Its showing all Actions (Edit, Delete, Change Owner)

Component:

<aura:component>
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{!this}" action="{! c.init }"/>
<lightning:datatable data="{! v.mydata }"
                     columns="{! v.mycolumns }"
                     keyField="Id"
                     hideCheckboxColumn="true"
                     onrowaction="{! c.handleRowAction }"
                     showRowNumberColumn="true"/>

Controller:

({
init: function (cmp, event, helper) {

    var actions = [
        { label: 'Show details', name: 'show_details' },
        { label: 'Delete', name: 'delete' }
    ];

    cmp.set('v.mycolumns', [
            {type:  'action', typeAttributes: { rowActions: actions } },
            {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
            {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes:
                { iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }},
            {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}},
            {label: 'Contact Email', fieldName: 'contact', type: 'email'},
            {label: 'Contact Phone', fieldName: 'phone', type: 'phone'}
    ]);
    cmp.set('v.mydata', [{
            id: 'a',
            opportunityName: 'Cloudhub',
            confidence: 0.2,
            amount: 25000,
            contact: 'jrogers@cloudhub.com',
            phone: '2352235235',
            trendIcon: 'utility:down'
    },
    {
            id: 'b',
            opportunityName: 'Quip',
            confidence: 0.78,
            amount: 740000,
            contact: 'quipy@quip.com',
            phone: '2352235235',
            trendIcon: 'utility:up'
    }]);
},
getSelectedName: function (component, event, helper) {
    var selectedRows = event.getParam('selectedRows');
    // Display that fieldName of the selected rows
    for (var i = 0; i < selectedRows.length; i++){
        alert("You selected: " + selectedRows[i].Name);
    }
},
handleRowAction: function (cmp, event, helper) {
    var action = event.getParam('action');
    var row = event.getParam('row');
    switch (action.name) {
        case 'show_details':
            alert('Showing Details: ' + JSON.stringify(row));
            break;
        case 'delete':
            var rows = cmp.get('v.data');
            var rowIndex = rows.indexOf(row);
            rows.splice(rowIndex, 1);
            cmp.set('v.data', rows);
            break;
    }
}

})