It should be possible to adjust the sizes of the panels by dragging them narrower or wider

[Annikenkbrathen]

The user should be able to control the space usage here and adjust the panels. The preview and component panels should also be able to be hidden if the user desires

[wrt95]

Create new hook useAppLocalStorage that uses app and org and uses the useLocalStorage hook 😄 We must also create a @stduio/component named ResizeableLayout that can be reused on dataModelPage, textEditorPage and processEditorPage(?)

[wrt95]

Linked with #12730, and should be implemented in the same way

[ErlingHauan]

Testing

Nice work on a feature that is super nice to finally have in Studio 👏

Should we add a min-width for the two middle columns in the Lage page, so that it is not possible to hide them entirely? Not having a min-width can lead to the issue below, where it gets difficult to retrieve the two middle columns, and the "Open preview" button sticks to the left side of the screen instead of the right side.

https://github.com/user-attachments/assets/a94bb144-745c-457e-8bbc-4bf7d1461164

This one is more a personal opinion, but I think this feature would look cleaner without the hover effect on the resize handle. To me, the Studio UI appears more solid without it. What do you think? Here's a video where the hover effect is disabled:

https://github.com/user-attachments/assets/d7017de6-5db7-4edf-b5ba-f001c04ab3bf

Other than this, it looks like it works perfectly, both in Datamodell and Lage 😊

[standeren]

I also have two small comments on this one;

1. maybe also very personal preference, but could the default be to show the preview?
2. If I use a small screen, regular 14", and I open preview, the content of the config tab gets very large/wide so I get a horizontal scroll inside it 🫣

https://github.com/user-attachments/assets/49f2e840-913b-4f95-a2eb-572c340030b7

But need to add that this was a nice feature to finally get in Studio 🤩 It will be even better as soon as we store the chosen sizes 👏

[lassopicasso]

This looks really nice! Love this feature! I have a small comment on what @ErlingHauan mentioned:

Should we add a min-width for the two middle columns in the Lage page, so that it is not possible to hide them entirely?

In the refinement of this task, didn't we discuss having the same effect as in the preview? When the config and pages columns get narrow enough, shouldn't they be hidden with a button, similar to the preview?

[Jondyr]

Testing

Nice work on a feature that is super nice to finally have in Studio 👏

Should we add a min-width for the two middle columns in the Lage page, so that it is not possible to hide them entirely? Not having a min-width can lead to the issue below, where it gets difficult to retrieve the two middle columns, and the "Open preview" button sticks to the left side of the screen instead of the right side.

20240715-0646-17.2517201.mp4 This one is more a personal opinion, but I think this feature would look cleaner without the hover effect on the resize handle. To me, the Studio UI appears more solid without it. What do you think? Here's a video where the hover effect is disabled:

20240715-0703-59.5373789.mp4 Other than this, it looks like it works perfectly, both in Datamodell and Lage 😊

@ErlingHauan Good catch on the preview collapsing issue, i agree, a min-width on the center columns make sense 👍 For the on-hover effect, i am fairly neutral to the two options, but I do see your point on it feeling more solid. I will make changes for both.

[Jondyr]

@standeren

1. maybe also very personal preference, but could the default be to show the preview?

I agree, especially since collapsed state is not persistent.

2. If I use a small screen, regular 14", and I open preview, the content of the config tab gets very large/wide so I get a horizontal scroll inside it 🫣

Thanks for noticing this. It is definitely an unintended issue that the content accordion's content is not resizing as it used to before.

[Jondyr]

@standeren @ErlingHauan I've made some changes and created a PR here: #13154 Here's a short clip showing some of the changes:

https://github.com/user-attachments/assets/3a505c2a-e786-4989-adbc-50614c90b462

[ErlingHauan]

I noticed one more thing: it is not possible to click and drag the scrollbars any more:

https://github.com/user-attachments/assets/4b9c63cc-a0c1-4475-9079-edc7a8124eea

[Jondyr]

I noticed one more thing: it is not possible to click and drag the scrollbars any more:

20240717-0705-47.6720153.mp4

This is interesting, it works in firefox as the scrollbar is different and wider. I have tried to find a solution that does not alter the scrollbar or make the draggable handle area very small, but have found no solutions yet.

We could possibly solve this by styling the scrollbar on webkit-based browsers wider, as we are using ::-webkit-scrollbar in App.css. But the mdn docs explicitly state "Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.". However, removing this styling is quite intrusive:

screenshots

Firefox

Maybe this should be discussed?

[ErlingHauan]

Ouch, that doesn't look very good! 😄

According to this article, Firefox, Chrome, and Edge are starting to support the official scrollbar standard, while Safari is lagging behind.

Maybe we should revisit how we style the scrollbars in a separate issue?

[Jondyr]

Ouch, that doesn't look very good! 😄

According to this article, Firefox, Chrome, and Edge are starting to support the official scrollbar standard, while Safari is lagging behind.

Maybe we should revisit how we style the scrollbars in a separate issue?

Good find 👍 Agreed, i think we should revisit this. I created a new issue referencing your comment.