Openlayers: add padding to zoom in on a cluster

I need to add a padding to a zoom in on cluster function. I’ve used a part of this code to do this.

var zoomCluster = function(pixel) {

  var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
  });

  if (feature) {

    var features = feature.get('features');
    if (features.length > 0) {
      var extent = ol.extent.createEmpty();
      features.forEach(function(feature) {
        ol.extent.extend(extent, feature.getGeometry().getExtent());
      });
      map.getView().fit(
        extent,
        [500, 0, 500, 0],
      );

    }

  }

};

map.on('click', function(evt) {
  zoomCluster(evt.pixel);
});

I can click on a cluster and zoom in it without problem but it seams that tha padding is ignored.

What I’ve wrong?

Edit GeoJSON

{
    "type": "FeatureCollection",
    "features": [
        {
            "id": 1,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    18.480233975421925,
                    50.937583702324076
                ]
            },
            "properties": {
                "publishing_date": "2020-06-25T15:00:37",
                "livability": "4.00"
            }
        },
        {
            "id": 2,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    14.25,
                    40.83333
                ]
            },
            "properties": {
                "publishing_date": "2020-06-28T18:27:47",
                "livability": "1.57"
            }
        },
        {
            "id": 3,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    17.09611,
                    50.69667
                ]
            },
            "properties": {
                "publishing_date": "2020-06-28T18:28:50",
                "livability": "4.14"
            }
        },
        {
            "id": 4,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    16.00228,
                    50.48138
                ]
            },
            "properties": {
                "publishing_date": "2020-06-28T18:29:17",
                "livability": "2.71"
            }
        }
    ]
}

Cluster code

var clusterDistance = 100;

var clusterSource = new ol.source.Cluster({
  source: new ol.source.Vector({
      url: api_url,
      format: new ol.format.GeoJSON(),
  }),
  distance: clusterDistance,
});

var styleCache = {};
function getStyle (feature, resolution) {
  var size = feature.get('features').length;
  var style = styleCache[size];
  if (!style) {
    var color;
    if ( size>clusterDistance ) {
      color = "rgba(192,0,0,0.75)";
    } else if ( size>clusterDistance/3 ) {
      color = "rgba(255,128,0,0.75)";
    } else if ( size>1 ) {
      color = "rgba(0,128,0,0.75)";
    } else {
      color = "rgba(0,0,255,1.0)";
    }
    var radius = (Math.max(8, Math.min(size*0.75, 20))) * 1.5;
    style = styleCache[size] = new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        stroke: new ol.style.Stroke({
          color: "rgba(255,0,0,1.0)",
          width: 0.75,
          lineDash: [3, 3],
        }),
        fill: new ol.style.Fill({
          color: color
        })
      }),
      text: new ol.style.Text({
        scale: radius/8,
        text: size.toString(),
        fill: new ol.style.Fill({
          color: 'rgba(255,255,255,1.0)'
        })
      })
    });
  }
  return style;
};

var cluster = new ol.layer.Vector({
  source: clusterSource,
  style: getStyle,
});
map.addLayer(cluster);

view.fit(extent, {padding: [topPadding, rightPadding, bottomPadding, leftPadding]});