Mapbox Map Display and Style not implemented correctly

[dinwun450]

mapbox-gl-js version: 2.15.0

browser: Google Chrome

Steps to Trigger Behavior

1. If the map does load, but is placed in a separate div that is hidden and shown when accessed by JavaScript display and hide functionality, then the map size is cropped, and the Mapbox logo is smaller than the normal size of the logo.

Link to Demonstration

https://dinwun450.github.io/Transcyclopedia/sanfrancisco/muni/muni.html# (Go to Interactive Map)

Expected Behavior

Actual Behavior