MapMouseEvent location incorrect inside UIKit grid

Nobody has claimed this yet.

**mapbox-gl-js version 2.7.0**:

**Browser: Chrome 98.0.4758.102, Safari 13.1.2**:

### Steps to Trigger Behavior

1. Create a map inside an UIKit grid, add a point feature
2. Add the click event listener with feature querying based on the e.point event location
3. Click on the feature added in step 1
4. The clicked feature should be returned, but it is not

### Link to Demonstration
https://jsfiddle.net/Johan111/vywdncj0/2/
Check the logs in the console

### Expected Behavior
queryRenderedFeatures(e.point) should return the clicked feature

### Actual Behavior
queryRenderedFeatures(e.point) returns nothing,
but queryRenderedFeatures([e.originalEvent.layerX, e.originalEvent.layerY]) does

It seems to be related to the padding added by the UIKit grid style. The e.point is shifted from the e.originalEvent by the same amount as is the padding.

Start with the linked JSFiddle and reproduce the click behavior in a UIKit grid, comparing e.point with e.originalEvent.layerX and layerY. Trace the map click event coordinate calculation and its handling of grid padding; done means queryRenderedFeatures(e.point) returns the clicked feature in the reported setup.

Written by the indexing model from the issue text.