Is it possible to set/edit the resolution sizes for the preset devices in Preview mode, e.g. Smartphone = 390x844 and Laptop = 1440x900 https://cdn.discordapp.com/attachments/1194632844056743996/1194632844253868073/image.png?ex=65b10f89&is=659e9a89&hm=0eca0bc37191722971904cffcc1c8f02295e4af241c16c3643ef09c6f49c62f4&

I became curious, so I had a look - and yes you can but it is a bit hacky 😄 The sizes are defined in CSS here: https://github.com/umbraco/Umbraco-CMS/blob/2e61d6449ae8e0c837dafa1e93ac950eda36c4f2/src/Umbraco.Web.UI.Client/src/less/canvas-designer.less#L190 Which means we should be able to overwrite them if we can load our own css. The problem is the actual preview part of the preview view is loaded in an iframe, so the frontend css is out of scope. The view for the preview can be found here: https://github.com/umbraco/Umbraco-CMS/blob/2e61d6449ae8e0c837dafa1e93ac950eda36c4f2/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoBackOffice/Preview.cshtml#L4 Which is part of the compiled assets in the Umbraco.Cms.StaticAssets.dll. However we can see it is a RCL which should mean we can overwrite the view if we place something in the same path as that one. After a bit of digging I found that if you copy paste the preview view I linked above into this path: ~/umbraco/UmbracoBackOffice/Preview.cshtml Then you could add your own css to that file - fx I added this in the header:

html
<style type="text/css">
    .smartphone-landscape {
        width: 940px;
        height: 260px;
    }
</style>

And it set the sizes when I click on it: https://cdn.discordapp.com/attachments/1194632844056743996/1194645477757571155/image.png?ex=65b11b4d&is=659ea64d&hm=e916496317c7c28b0f8fe002bb81f8f6e0eb2297feb6a31c55ff885fdb26188e&

Thanks for the tip

@Jemayn Hey, I was about to post this very question. However the solution you have changes the current values that appear to be set via a hardcoded list in a TS file. Is there a way to add our own list instead of that one? e.g. iPad Pro, iPad, Pixel 9 etc. Thats what I am after, spent most of today trying to find a way to override the hardcoded list. The fact you found you found you can override the page is amazing, is this possible with the TS files? Or maybe we can override something on the page? Not sure why this isnt built into Umbraco, seems super simple and could be a great feature. Link to the device list: https://github.com/umbraco/Umbraco-CMS/blob/b9250c20e9c880da88972e49e24a33cd946fce29/src/Umbraco.Web.UI.Client/src/apps/preview/apps/preview-device.element.ts

My original answer was an older version of Umbraco before the web component preview page. I am not sure how you would go about doing it, it looks like you can change the devices in the

umb-preview

component, but I cannot find any file that calls this component outside of the storybook so no clue how it all works now..

Im currently on Umbraco 13, waiting for the next LTS release. And no worries at all, you seemed to have worked out that first bit, thought you might know more. 😛

Curiosity got the best of me - looks to be an undocumented extension type called previewApp. The default apps are listed here: https://github.com/umbraco/Umbraco-CMS/blob/b9250c20e9c880da88972e49e24a33cd946fce29/src/Umbraco.Web.UI.Client/src/apps/preview/apps/manifests.ts So if nothing else you could unregister the Umb.PreviewApps.Device app and copy its code into your own app where you change the settings and then register that as a

previewApp

type extension. None of this is tested but it should work

Thats a pretty good idea! Thank you for that, I will give it ago. 🙂