I use the Tampermonkey extension for Chrome to adjust the CSS, and using that I’m even able to add a fake iPhone bezel:
To use the script, you’ll need the Tampermonkey extension. Once installed, create a new script and paste this in:
// ==UserScript==
// @name Thunkable iPhone 8 Black
// @namespace http://kwmmcdn.com/
// @version 0.1
// @description Make the phone preview closer to standard iPhone size
// @author Kyle_Williams
// @match https://x.thunkable.com/projects/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
GM_addStyle(' .phone-preview { max-width: 400px; min-width: 400px; height: 900px; padding: 162px 40px 166px 38px; background-image: url(http://162.213.250.21/~kwmmcdn/thunkable/iphone8bezel_black.png) }');
GM_addStyle(' .phone-preview * { background-size: cover }');
GM_addStyle(' .designer .invisible-component-bar { width:50%; margin-left: 26% }');
console.log('ran');
})();
This is still not 100% accurate to iPhone screen size, but is much closer than the default look. Also, you may have to refresh to get it to work sometimes (so it can detect the URL). The iPhone bezel image is hosted on my VPS, and I may not keep it there if the demand on my server becomes too high, so feel free to rehost it on your own server.
Also, I use this on a 27" 5K iMac so I don’t know how well it holds up on other screens.