Mapbox asymmetric padding and map bounds

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.0/mapbox-gl.js"></script>
<body>
  <div id="map"></div>
</body>

CSS

#map{
  position: absolute;
  top: 0;
  bottom: 0;
  height: 900px;
  width:100%;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYnBhY2h1Y2EiLCJhIjoiY2lxbGNwaXdmMDAweGZxbmg5OGx2YWo5aSJ9.zda7KLJF3TH84UU6OhW16w';

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-73.9774108244587, 40.820698485268366],
    zoom: 11.6
});

map.showPadding = true
map.setPadding({left: 300, right: 100, top: 50, bottom: 30})

const bounds = {
  "n": 40.896790957065434,
  "s": 40.76021859203365,
  "e": -73.85756962495667,
  "w": -74.09102645202957
}

const maxBounds = [[bounds.w, bounds.s], [bounds.e, bounds.n]]
map.setMaxBounds(maxBounds)

const boundsRect = [
  [bounds.e, bounds.n],
  [bounds.w, bounds.n],
  [bounds.w, bounds.s],
  [bounds.e, bounds.s],
  [bounds.e, bounds.n]
]

map.on('click', (e) => console.log('##', e.lngLat.toArray()))

map.on('load', function () {
    map.addLayer({
        'id': 'bounds',
        'type': 'line',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'LineString',
                    'coordinates': boundsRect
                }
            }
        },
        'paint': {
      		'line-color': '#000000',
      		'line-width': 5
    		},
    		'layout': {}
    });
});