ide panel - Resizing side panel should resize the simulator

[terrysahaidak]

When using side panel, the simulator is just huge. Would be cool to be able to change its size. But also it should automatically scale by accessible width on resizing

Here is an example:

https://github.com/software-mansion/react-native-ide/assets/7809008/933ea2cf-e641-4ab5-88d9-021295943143

[kmagiera]

Thanks for reporting. We actually have the minimum size of the emulator fixed. From our testing it seem impractical to have the phone size down indefinitely with the window.

As you can see on the video, it scales down a bit but then stops. Also if you give it more space it will scale up to fill the window. We can perhaps change the defaults to make it scale down a bit more, but at some point it'd be difficult to interact with anything on the screen.

In the future we plan to add zoom control which will allow you to control the size instead of relying on the window scaling.

@filip131311 can we maybe shrink down the minimum size of the device by say 20-30% ?

[terrysahaidak]

I think this is something that the user should be able to pick in the dropdown and then have an option to autoscale it. The motivation for this is the fact that you can always resize the actual simulator as you want but there are multiple scaling presets:

For example, here i'm running it on my Macbook Pro 14" with the smallest scaling possible and it takes 1/4 of the whole screen:

While with the external simulator, i feel way more comfortable having simulator with smaller size (a bit smaller than the physical size) and some paddings around, something like this:

One important usecase that free resizing can solve for the future is being able to show multiple small simulators side by side which is pretty common when developing for different screen sizes.

Also, here physical accurate for the comparison with the size of the IDE simulator:

[kmagiera]

I understand that. I think it'd be ideal to have that zoom control added, but this isn't an immediate priority for us.

Regarding full autoscaling I remember the biggest issue was in cases when you want to use logs or debug panel that pops up from the bottom. This is something you'd end up using quite frequently in practice. But when you open it (it slides in from the bottom), it takes a significant amount of screen. In that scenario shrinking down simulator too much is very annoying as you lose focus on whichever part you've been looking at in the UI and also its almost impossible to interact with such scaled down screen

[terrysahaidak]

Since I'm always constantly showing/hiding terminal for logs (debug console in this case) it makes it very annoying to switch scale up-down.

https://github.com/software-mansion/react-native-ide/assets/7809008/4c5cb70c-6f99-4004-96c6-e15befe1aec7

I can play around with some scaling options, perhaps. Maybe I will end up with something that I will be able to contribute to the IDE.

[kmagiera]

any contributions are welcome here, unfortunately vscode doesn't have concept of floating panels, so every layout change of any panel results in a change of the window size for the emulator. As mentioned earlier, I was thinking of adding zoom controls in which case you'd be able to lock it to certain size (also there could be an option to go back to auto scaling)

[terrysahaidak]

For now I'm thinking of 2 sets of controls which mich help to address these issues:

1. Device size
   1. Small
   2. Medium
   3. Large
   4. Auto (fits the whole screen)
2. Device position
   1. Top
   2. Bottom
   3. Center

So for example top + small size will fix this specific usecase completely.

But also if you prefer a different panel alignment so bottom panes won't affect the side panel, then you can change device position to center/bottom if you prefer.

[jakub-gonet]

Seems like zoom feature solved that.