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 <[email protected]>

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,