I’m seeing UI differences between manually resizing the browser window and using the “Toggle device toolbar” even though the width and height values of the viewport seem to be identical. To illustrate, here is an example:
- When I manually resize the window (by dragging), the page looks like this:
[![enter image description here](https://i.stack.imgur.com/qyJBx.png)](https://i.stack.imgur.com/qyJBx.png)
- And when I toggle the device toolbar, the page looks like this:
[![enter image description here](https://i.stack.imgur.com/uZItv.png)](https://i.stack.imgur.com/uZItv.png)
The “Toggle device toolbar” appears to be the accurate representation of what the UI would actually look like, but when I run the Cypress tests, the snapshots look like the first image - when I resize the window by dragging. As a result, some of the buttons end up not being visible on the page, but they are visible when I actually open the page on any device (latop, tablet, mobile, etc.).
I’m wondering why this is happening. Here is a link to the actual website in question: https://ddmal.music.mcgill.ca/Neon/editor.html?manifest=CF-005. Does anyone have any insight into this?