From a7fe72c2372ca34b4802c434f7b862a8fa19bd3e Mon Sep 17 00:00:00 2001 From: Vincent Fugnitto Date: Wed, 10 Jul 2019 22:06:00 -0400 Subject: [PATCH] Fix scaling issue for the file and save dialogs Fixes #1935 - added the `theia-ResponsiveFileDialog` class so extenders can easily use the class to get the default styling of the `file-dialog` and its responsive media query. Our `file-dialog` and `save-dialog` have scaling issues when the screen's viewport is limited. Since our dialogs are not implemented using React (which would handle scaling much easier), the problem was addressed using css media queries. This means that when the view becomes limited at 700px, the size of the `file-tree` is reduced allowing the entire dialog to more easily visible and the actions buttons still accessible. Before, the buttons were not visible which meant the useability of the dialog was reduced. Signed-off-by: Vincent Fugnitto --- .../src/browser/style/file-dialog.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/filesystem/src/browser/style/file-dialog.css b/packages/filesystem/src/browser/style/file-dialog.css index fa4aed9435bdf..c99b228a33846 100644 --- a/packages/filesystem/src/browser/style/file-dialog.css +++ b/packages/filesystem/src/browser/style/file-dialog.css @@ -19,17 +19,20 @@ */ .dialogContent .theia-FileDialog, -.dialogContent .theia-SaveFileDialog { - width: 500px; -} - -.dialogContent .theia-FileDialog { +.dialogContent .theia-SaveFileDialog, +.dialogContent .theia-ResponsiveFileDialog { height: 500px; + width: 500px; background-color: var(--theia-layout-color0); } -.dialogContent .theia-SaveFileDialog { - height: 450px; + +@media only screen and (max-height: 700px) { + .dialogContent .theia-FileDialog, + .dialogContent .theia-SaveFileDialog, + .dialogContent .theia-ResponsiveFileDialog { + height: 300px; + } } .dialogContent .theia-NavigationPanel,