Dialogs have been designed to focus you on editing. Among other things, their width is restricted as long lines of text become harder to read and edit. There are always cases, though, when a user wants to make a dialog larger, so that he or she uses as much of the available screen estate as possible.

We've received the feedback several times that people want to "make the dialog larger" manually. However, from the discussion I had, I got the impression that this is actually not what users want. Making a dialog larger as you would a regular window would also mean that you would have to be able to move it around. What those I've discussed this with really seem to want is to make them "go full-screen quickly". In particular, manual interventions here are highly distracting, unsatisfying since they require several attempts to get things right, and not working well on all devices here.

I'd like thus to implement a convincing, intermediate solution that covers what users want in 95% of the cases. I'd like to add a full-screen toggle to all dialogs and small apps, which does the following:

For regular dialogs

• The toggle is added to the dialog header, between the help and the close button. The close button will have to be clearly separated to avoid accidentally closing the dialog.
• The toggle extends the dialog in width to take up the entire width except for a 40px left and right margin, so that you still see that the dialog is modal. The left section hosting the labels will probably get wider as well and the actual fields are extended to cover the remaining width on the right.
• We will have to still define how the dialog grows in height. My current take is that dialogs do not grow in height, unless they contain text areas. If they do, its the text areas which are actually grown in height (e.g. making them 3x or 5x higher), taking the height of the dialog with them.

For small apps

• The full-screen toggle is actually added to the background and inside the middle area, where the form resides by default. The toggle does extend the description area at the top and the form including the light gray, center column. It thus works in the same way as it does for regular dialogs.

For light dialogs

• We might want a toggle for chooser dialogs, but I maybe not for rename dialogs. Light dialogs are only supposed to be used very quickly and on very tightly focused tasks, so I do not want to add a toggle to all light dialogs by default. That's denying the intent. I thus think that the toggle should be configurable here.

On tablets

• The original design already called for regular dialogs to always cover the full width except for a 40px margin. Dialogs on the iPad thus don't need the full-screen toggle. You always want them to take up as much of the available screen estate as possible, since space is limited and fonts have to be larger anyways. If you'd like a form to be wider, you instead turn the tablet to landscape orientation, if you actually are working in portrait. Regular dialogs on tablets don't look like this currently, however. I'd like to fix this at the same time, if possible.

The guiding concept

To sum this up, here's the overall concept for allowing forms (and other elements) to take up more of the available screen estate is:

1. a toggle to make text areas go full-dialog for those cases, where this makes sense
2. a full-screen toggle on dialogs to make them as wide as possible
3. the full-screen toggle in the app to hide the header of the webapp.