OpenLayers text label overlap even with padding - gis

Question

Ol docs state that Padding can be used on text labels for decluttering. ol/style/Text,
However my labels are still overlapping even when I indicate Padding.
Live example on codepen: https://codepen.io/sjvmarigerr/pen/oNNVMXb?editors=1010
Style Function:
function styleFunction (feature) {
return new ol.style.Style({
text: new ol.style.Text({
text: feature.get('PORT_NAME'),
padding: [3, 3, 3, 3],
font: "bold 15px sans-serif"
})
});};

Answer 1

Have you tried the declutter option??? If not give it a try, it might solve your problem.
To do so, replace your vector layer config from this:
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
To this:
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction,
declutter: true
});
Remember that declutter should hide label if overlapping and will show label when zoom level is enough for not overlapping.

Answer 2

Due to zoom level i really don't see a way it will not overlap, but to make it more visible you can try the example below.
https://codepen.io/gpproton/pen/gOOEjJj?editors=1010
function styleFunction (feature) {
return new ol.style.Style({
text: new ol.style.Text({
text: feature.get('PORT_NAME'),
padding: [3, 3, 3, 3],
font: "bold 11px sans-serif",
stroke: new ol.style.Stroke({
color: '#ffffff',
width: 1
}),
fill: new ol.style.Fill({
color: '#000'
})
})
});
};