ширина всплывающей листовки на маркерах, загруженных с помощью JSON

Question

У меня есть листовка с загруженными маркерами динамически с geoJSON data:

mapLayers.markets = L.geoJSON(geoData, {
    pointToLayer: function (feature, latlng) {
        switch (feature.properties.status) {
            case "stress":
                return L.marker(latlng, { icon: iconA });
            case "alert":
                return L.marker(latlng, { icon: iconB });
            case "crisis":
                return L.marker(latlng, { icon: iconC });
        }
    },
    onEachFeature: onEachFeature,
}).addTo(map);

Я связываю всплывающее окно внутри onEachFeature function:

function onEachMarketFeature(feature, layer) {    
    var tableCommon = '<table>' +
        '<thead><tr><th>Agency</th><th>Personnel</th></tr></thead>' +
        '<tbody>' +
        '<tr><td>Alfa</td><td>12</td></tr>' +
        '<tr><td>Bravo</td><td>123</td></tr>' +
        '</tbody></table>';
    var tableSingle='<table>' +
        '<thead><tr><th>Agency</th><th>Personnel</th></tr></thead>' +
        '<tbody>' +
        '<tr><td>Juliet</td><td>62</td></tr>' +
        '<tr><td>Lima</td><td>41</td></tr>' +
        '</tbody></table>';

    var container = '<div><div class="row"><div class="col-xl-6">' + tableCommon + '</div><div class="col-xl-6">' + tableSingle + '</div></div></div>';

    layer.bindPopup(feature.properties.type +
        '<br/> Market Code=' + feature.properties.code + '<br/>' + feature.properties.name + '</a><br/>' + container);
}

Проблема в том, что содержимое внутри всплывающего окна, определенного классами строк-столбцов bootstrap4 , больше, чем всплывающее окно, и это не изменяется, чтобы соответствовать ему, и результаты меньшей ширины.

Я попытался установить в функции bindPopup {maxWidth: "none"}, но это даже хуже, иВсплывающее окно очень маленькое.

Вот что я получаю:

и вот что я пытаюсь получить: