Resource allocation not visible when timerange is above in resource utilization

[taauntik]

Forum post

It can be reproduced by the following steps:

1. Open resource utilization example ( https://bryntum.com/examples/gantt/resourceutilization/ )
2. Place the following code in the code editor:

import { Gantt, ProjectModel, ResourceUtilization, Splitter, DateHelper, AvatarRendering } from '../../build/gantt.module.js?459924';
import shared from '../_shared/shared.module.js?459924';

const project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/timeranges.json'
        }
    },

autoLoad : true,

// This config enables response validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse : true
});

const gantt = new Gantt({
    project,
    appendTo                : 'container',
    viewPreset              : 'weekAndDayLetter',
    tickSize                : 40,
    columnLines             : true,
    features : {
        timeRanges : {
            enableResizing      : true,
            showCurrentTimeLine : false,
            showHeaderElements  : true
        }
    },
    columns                 : [
        { type : 'name', width : 280 },
        { type : 'resourceassignment', showAvatars : true, width : 170 }
    ]
});


new Splitter({
    appendTo : 'container'
});

const resourceUtilization = new ResourceUtilization({
    appendTo                : 'container',
    project,
    partner                 : gantt,
    rowHeight               : 40,
    showBarTip              : true,
    features : {
        timeRanges : {
            enableResizing      : true,
            showCurrentTimeLine : false,
            showHeaderElements  : true
        }
    },
    columns                 : [
        {
            type  : 'tree',
            field : 'name',
            width : 280,
            text  : 'Resource / Task',
            renderer({ record, grid, value }) {
                // lets show event start/end for assignment row
                if (record.origin.isResourceModel) {
                    const resource = record.origin;

            return {
                class    : 'b-resource-info',
                children : [
                    value
                ]
            };
        }
        else {
            return value;
        }
    }
},
{
    cellCls : 'taskDateRange',
    renderer({ record, value }) {
        // Show event start/end for assignment row
        if (record.origin.isAssignmentModel) {
            const task = record.origin.event;

            return DateHelper.format(task.startDate, 'MMM Do') + ' - ' + DateHelper.format(task.endDate, 'MMM Do');
        }

        return '';
    }
}
],
bbar : {
    cls    : 'utilization-toolbar',
    height : '3em',
    items  : [
        {
            type     : 'checkbox',
            ref      : 'showBarTip',
            text     : 'Enable bar tooltip',
            tooltip  : 'Check to show tooltips when moving mouse over bars',
            checked  : true,
            onAction : 'up.onShowBarTipToggle'
        }
    ]
},
onShowBarTipToggle({ source }) {
    resourceUtilization.showBarTip = source.checked;
}
});

project.load();

project.on('load', () => {
resourceUtilization.features.timeRanges.timeRanges[2].style = 'background: lightblue;';
});

3. Drag Configure ports within Audit TimeRange
4. The Resource Allocation is not visible.

[isglass]

Probably only need to adjust z-index