lightning:datatable column automatically resize when a force:refreshView event fires in another tab

I am encountering a strange problem in my lightning:datatable. Whenever a force:refreshView is fired from another tab (and my datatable is off screen), when i come back to the tab of the datatable I see the correct data with refreshed results, but the columns are tight. If the refreshView is fired when the datatable is on the screen, the value are corrected updated and the columns display as normal.

Before refreshView:

After refreshView in another tab:

My code is pretty straightforward.

component:

<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global" controller="RelatedTicketViewApexController">

<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="force:refreshView" action="{!c.recordUpdated}" />

<!-- attributes -->
<aura:attribute name="recordId" type="String"/>
<aura:attribute name="caseObj" type="Object" />
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="type" type="String" default=""/>
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="initialRowsNumber" type="Integer" default="15"/>
<aura:attribute name="rowsToLoad" type="Integer" default="20" access="global"/>
<aura:attribute name="totalNumberOfRows" type="Integer" default="300"/>
<aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>
<aura:attribute name="rowNumberOffset" type="Integer" default="0"/>
<aura:attribute name="currentCount" type="Integer" default="10"/>
<aura:attribute name="cardTitle" type="String" default="Related Cases" />

<force:recordData aura:id="caseRecord"
                  layoutType="FULL"
                  recordId="{!v.recordId}"
                  fields="Id,ParentId, AccountId, ContactId, Type, SubType__c, Case_Product__c, Activity_Type__c, Priority, Origin, BankAccount__c"
                  targetError="{!v.recordError}"
                  targetFields="{!v.caseObj}"
                  recordUpdated="{!c.recordUpdated}"
                  mode="EDIT"/>



<!-- the container element determine the height of the datatable --> 
<lightning:card>

<div aura:id="container" class="slds-scrollable_y">
    <lightning:datatable
            keyField="id"
            data="{! v.data }"
            rowNumberOffset="0"
            columns="{! v.columns }"
            showRowNumberColumn="true"
            onloadmore="{! c.loadMoreData }"
            enableInfiniteLoading="{! v.enableInfiniteLoading }"
            hideCheckboxColumn="true"/>
{! v.loadMoreStatus }

</div>

Controller:

({
doInit: function (component, event, helper) {
    component.set('v.columns', helper.getColumnDefinitions(component));
},

recordUpdated : function(component, event, helper) {
    var changeType = event.getParams().changeType;
    if (changeType === "CHANGED") { component.find("caseRecord").reloadRecord(); }
    console.log('component caseRecord reloaded');

    helper.getData(component, event);
},

loadMoreData: function (component, event, helper) {
    // loadMoreData logic
}

})

Thank you

EDIT: I add another info. If I later resize the browser windows, the columns return to the correct size auto…

<div aura:id="container" class="slds-scrollable_y full-width">
    <lightning:datatable
            keyField="id"
            data="{! v.data }"
            rowNumberOffset="0"
            columns="{! v.columns }"
            showRowNumberColumn="true"
            onloadmore="{! c.loadMoreData }"
            enableInfiniteLoading="{! v.enableInfiniteLoading }"
            hideCheckboxColumn="true"/>
{! v.loadMoreStatus }

</div>

.THIS .full-width {
    width: 100%;
}