Mapbox legend works on desktop, tablet but not on mobile. How do I fix it to display correctly on a mobile device?

Really not sure how to fix this so any help much appreciated.

In developer tools for Chrome the legend displays perfectly on top of a mapbox map for desktop, tablet and mobile. Here is what is looks like. It displays a semitransparent horizontal legend.

If I actually use my iphone though, the legends displays incorrectly. It becomes vertical and all formatting appears lost.

Here is my mapbox control:

 // Control implemented as ES6 class
    class fs_legend_control {
        
        onAdd(map) {
        var fs_legend_control_html = ' \
        <div class="my-legend"> \
            <div class="legend-title">Piste Difficulty Legend</div> \
                <div class="legend-scale"> \
                    <ul class="legend-labels"> \
                        <li><span style="background:#339933;"></span>Novice</li> \
                        <li><span style="background:#097CCB;"></span>Easy</li> \
                        <li><span style="background:#ED151F;"></span>Intermed\'</li> \
                        <li><span style="background:#000000;"></span>Advanced</li> \
                        <li><span style="background:#ffa502;"></span>Expert</li> \
                        <li><span style="background:#ffff01;"></span>Freeride</li> \
                        <li><span style="background:#ffc0cb;"></span>Unrated</li> \
                    </ul> \
                </div> \
            <div class="legend-source"> <a href="https://www.example.com/pistes/">About Piste Difficulty</a></div> \
        </div> \
        ';
            
            this._map = map;
            this._container = document.createElement('div');
            this._container.className = 'fs-legend-control';
            this._container.innerHTML = fs_legend_control_html;
            return this._container;
        }   
        onRemove() {
            this._container.parentNode.removeChild(this._container);
            this._map = undefined;
        }
    }

    map.addControl(new fs_legend_control(), "top-left");

Any reason why this doesn't work? Thank you.

from Mapbox legend works on desktop, tablet but not on mobile. How do I fix it to display correctly on a mobile device?