Remove hard-coded dialog width/height and size them dynamically

themes/MetroMumbleLight/main.scss

@@ -373,14 +373,9 @@ form {
   border-bottom: 1px solid $dialog-header-border-bottom-color;
 }
 .dialog-footer {
-  position: absolute;
-  bottom: 0px;
   width: calc(100% - 20px);
   margin: 10px;
 }
-.dialog-close {
-  float: left;
-}
 .dialog-submit {
   float: right;
 }
@@ -399,18 +394,18 @@ form {
 }
 .dialog {
   position: absolute;
+  max-height: calc(100% - 20px);
+  max-width: calc(100% - 20px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  overflow: auto;
   background-color: $dialog-bg-color;
   color: $dialog-color;
   border: 1px $dialog-border-color solid;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   z-index: 20;
 }
-.settings-dialog {
-  width: 450px;
-  height: 320px;
-  top: calc(50% - 160px);
-  left: calc(50% - 225px);
-}
 .settings-dialog table {
   width: 100%;
   padding: 5px;
@@ -445,12 +440,6 @@ form {
   top: calc(50% - 10px);
   left: calc(50% - 100px);
 }
-.connect-dialog {
-  width: 300px;
-  height: 227px;
-  top: calc(50% - 100px);
-  left: calc(50% - 150px);
-}
 .connect-dialog input[type=text] {
   font-size: 15px;
   border: 1px $dialog-input-border-color solid;
@@ -469,15 +458,7 @@ form {
   padding: 2px;
   width: calc(100% - 8px);
 }
-.connect-dialog.error-dialog {
-  width: 400px;
-  left: calc(50% - 200px);
-}
 .connection-info-dialog {
-  width: 500px;
-  height: 400px;
-  top: calc(50% - 200px);
-  left: calc(50% - 250px);
   h3 {
     margin-bottom: 5px;
   }