Adding Meta tag for ensuring transition of Play-Only-Mode

[justin212407]

This is a draft PR regarding fixing the issue of the play-only-mode not rendering even when the trigger point is reached. This PR is related to fixing #4493.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[justin212407]

@walterbender Please review this This PR adds a meta tag that tells mobile browsers to use the actual device width as the layout port so that the play only mode does not face an issue while rendering it on the user's phone screen

[walterbender]

Not 100% sure I understand what this does, but it doesn't seem to break anything.

FYI, I did notice this one anomaly, unrelated to this PR, but related to the general theme.

Notice that the record button doesn't scale with the other icons.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[justin212407]

So what i figured out is that this is not an actual bug in our code or our meta tag. On a real mobile device or when we physically shrink the desktop browser below 768 pixel, play-only mode works exactly as intended. The issue stems from how DevTools emulates different devices and scales as it can still report a larger width due to custom zoom and high device-pixel ratios in ‘Responsive’ mode. The meta viewport is crucial for correct rendering on real mobile devices otherwise, it might appear zoomed out or have incorrect breakpoints. On a real phone, that meta viewport ensures window.innerWidth matches the phone’s actual CSS width.

[justin212407]

@walterbender should i try to fix that record button scaling issue in this PR ?

[walterbender]

Let's look at Record in a separate PR

[justin212407]

Sure I'll definitely do that