From 80a555ae740a0a4f720b014e698c3eabbdcbf6ad Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 3 Jun 2025 14:16:28 -0700
Subject: [PATCH] feat: ui dialog responsiveness

---
 .../include/CreateDocker.php                  |  14 +-
 .../javascript/docker.js                      |   6 +-
 .../dynamix.vm.manager/VMMachines.page        |   8 +-
 .../dynamix.vm.manager/VMTemplates.page       |   4 +-
 emhttp/plugins/dynamix/Browse.page            |  23 +--
 emhttp/plugins/dynamix/BrowseButton.page      |  13 +-
 emhttp/plugins/dynamix/DashStats.page         |   2 +-
 emhttp/plugins/dynamix/include/Templates.php  | 135 +++++++++++++-----
 .../plugins/dynamix/sheets/BrowseButton.css   |  31 ++--
 .../dynamix/styles/default-dynamix.css        |  30 ++++
 10 files changed, 179 insertions(+), 87 deletions(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php b/emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php
index cd81b656a..d0e1d86c7 100644
--- a/emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php
+++ b/emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php
@@ -606,7 +606,7 @@ function addConfigPopup() {
   popup.dialog({
     title: title,
     height: 'auto',
-    width: 900,
+    width: 'auto',
     resizable: false,
     modal: true,
     buttons: {
@@ -678,7 +678,7 @@ function editConfigPopup(num,disabled) {
   popup.dialog({
     title: title,
     height: 'auto',
-    width: 900,
+    width: 'auto',
     resizable: false,
     modal: true,
     buttons: {
@@ -1471,27 +1471,27 @@ _(Config Type)_:
 _(Name)_:
 : <input type="text" name="Name" autocomplete="off" spellcheck="false">
 
-<div markdown="1" id="Target">
+<div markdown="1" id="Target" class="w-full">
 <span id="dt1">_(Target)_</span>:
 : <input type="text" name="Target" autocomplete="off" spellcheck="false">
 </div>
 
-<div markdown="1" id="Value">
+<div markdown="1" id="Value" class="w-full">
 <span id="dt2">_(Value)_</span>:
 : <input type="text" name="Value" autocomplete="off" spellcheck="false">
 </div>
 
-<div markdown="1" id="Default">
+<div markdown="1" id="Default" class="w-full">
 _(Default Value)_:
 : <input type="text" name="Default" autocomplete="off" spellcheck="false">
 </div>
 
-<div id="Mode"></div>
+<div id="Mode" class="w-full"></div>
 
 _(Description)_:
 : <textarea name="Description" spellcheck="false" cols="80" rows="3"></textarea>
 
-<div markdown="1" class="advanced">
+<div markdown="1" class="advanced" class="w-full">
 _(Display)_:
 : <select name="Display">
   <option value="always" selected>_(Always)_</option>
diff --git a/emhttp/plugins/dynamix.docker.manager/javascript/docker.js b/emhttp/plugins/dynamix.docker.manager/javascript/docker.js
index f08ea86ed..ad46fa385 100644
--- a/emhttp/plugins/dynamix.docker.manager/javascript/docker.js
+++ b/emhttp/plugins/dynamix.docker.manager/javascript/docker.js
@@ -63,9 +63,9 @@ function popupWithIframe(title, cmd, reload, func) {
   $('#iframe-popup').dialog({
     autoOpen:true,
     title:title,
-    height: 600,
-    width: 900,
-    draggable:true,
+    height: 'auto',
+    width: 'auto',
+    draggable: false,
     resizable:true,
     modal:true,
     open:function(ev, ui){
diff --git a/emhttp/plugins/dynamix.vm.manager/VMMachines.page b/emhttp/plugins/dynamix.vm.manager/VMMachines.page
index 9cd53c04c..dd672255d 100644
--- a/emhttp/plugins/dynamix.vm.manager/VMMachines.page
+++ b/emhttp/plugins/dynamix.vm.manager/VMMachines.page
@@ -158,8 +158,8 @@ function getisoimageboth(uuid,dev,bus,file,dev2,bus2,file2){
   });
   box.dialog({
     title: "_(Select ISOs for CDROMs)_",
-    height: 530,
-    width: 900,
+    height: 'auto',
+    width: 'auto',
     resizable: false,
     modal: true,
     buttons: {
@@ -188,8 +188,8 @@ function getisoimage(uuid,dev,bus,file){
   });
   box.dialog({
     title: "_(Select ISO)_",
-    height: 530,
-    width: 900,
+    height: 'auto',
+    width: 'auto',
     resizable: false,
     modal: true,
     buttons: {
diff --git a/emhttp/plugins/dynamix.vm.manager/VMTemplates.page b/emhttp/plugins/dynamix.vm.manager/VMTemplates.page
index 68c6295b5..4a4fb48a6 100644
--- a/emhttp/plugins/dynamix.vm.manager/VMTemplates.page
+++ b/emhttp/plugins/dynamix.vm.manager/VMTemplates.page
@@ -170,8 +170,8 @@ function import_template(){
    });
   box.dialog({
     title: "_(Select File)_",
-    height: 530,
-    width: 900,
+    height: 'auto',
+    width: 'auto',
     resizable: false,
     modal: true,
     buttons: {
diff --git a/emhttp/plugins/dynamix/Browse.page b/emhttp/plugins/dynamix/Browse.page
index 6ef3f1703..a745e1b96 100644
--- a/emhttp/plugins/dynamix/Browse.page
+++ b/emhttp/plugins/dynamix/Browse.page
@@ -251,10 +251,11 @@ function fileEdit(id) {
     classes: {'ui-dialog': 'ui-dfm'},
     autoOpen: true,
     title: fileName(source),
-    height: Math.min(window.innerHeight-80, 800),
-    width: Math.min(window.innerWidth, 1200),
+    width: 'auto',
+    height: 'auto',
     resizable: false,
     modal: true,
+    draggable: false,
     buttons: {
       "_(Save)_": function(){
         $.post('/webGui/include/Control.php',{mode:'save', file:encodeURIComponent(source), data:encodeURIComponent(editor.session.getValue())});
@@ -291,9 +292,10 @@ function doJobs(title) {
     classes: {'ui-dialog': 'ui-dfm'},
     autoOpen: true,
     title: title,
-    height: 630,
-    width: 900,
+    height: 'auto',
+    width: 'auto',
     resizable: false,
+    draggable: false,
     modal: true,
     buttons: {
       "_(Start)_": function(){
@@ -470,8 +472,9 @@ function doAction(action, title, id) {
     autoOpen: true,
     title: title,
     height: dfm.height,
-    width: 900,
+    width: 'auto',
     resizable: false,
+    draggable: false,
     modal: true,
     buttons: {
       "_(Start)_": function(){
@@ -750,8 +753,9 @@ function doActions(action, title) {
     autoOpen: true,
     title: title,
     height: dfm.height,
-    width: 900,
+    width: 'auto',
     resizable: false,
+    draggable: false,
     modal: true,
     buttons: {
       "_(Start)_": function(){
@@ -990,7 +994,7 @@ $(function(){
   if (dirs.length > 1) {
     for (var n=1; n < dirs.length; n++) {
       var subdir = dirs.slice(1,n+1);
-      url.push('<a class="none" href="/<?=$path?>?dir=/'+encodeURIComponent(subdir.join('/'))+'" oncontextmenu="xlink(\'/'+encodeURIComponent(subdir.join('/'))+'\');return false">'+(n == 1 ? '<i class="fa fa-home"></i>' : dirs[n])+'</a>');
+      url.push('<a class="none" href="/<?=$path?>?dir=/'+encodeURIComponent(subdir.join('/'))+'" oncontextmenu="xlink(\'/' + encodeURIComponent(subdir.join('/')) + '\');return false">'+(n == 1 ? '<i class="fa fa-home"></i>' : dirs[n])+'</a>');
     }
   } else {
     url.push('<i class="fa fa-home red-text"></i>');
@@ -1005,8 +1009,11 @@ $(function(){
   });
 <?if ($display['resize']):?>
   resize();
-  $(window).bind('resize',function(){resize();});
 <?endif;?>
+
+$(window).bind('resize',function(){
+  resize();
+});
   loadList();
 <?if (!$dir||$isshare):?>
   $.cookie('dfm_control.common','1');
diff --git a/emhttp/plugins/dynamix/BrowseButton.page b/emhttp/plugins/dynamix/BrowseButton.page
index 54aa3a168..71804a564 100644
--- a/emhttp/plugins/dynamix/BrowseButton.page
+++ b/emhttp/plugins/dynamix/BrowseButton.page
@@ -41,7 +41,15 @@ String.prototype.dfm_build = function(){return this.replace(/\n(<!--!|!-->)\n/g,
 String.prototype.dfm_wedge = function(len){len=len||70;return this.length<=len ? this : this.slice(0,Math.round(len/2)-2)+'...'+this.slice(-1-Math.round(len/2));}
 
 // General variables
-const dfm = {window:null, dialog:false, running:false, previous:'', height:0, tsize:{0:0,1:6,2:3,3:3,4:3,11:2,12:2,14:0,15:3}};
+const dfm = {
+  window: null,
+  dialog: false,
+  running: false,
+  draggable:  false,
+  previous: '',
+  height: 0,
+  tsize: {0: 0, 1: 6, 2: 3, 3: 3, 4: 3, 11: 2, 12: 2, 14: 0, 15: 3},
+};
 var dfm_read = {};
 
 function dfm_footer(action, text) {
@@ -256,8 +264,9 @@ function dfm_makeDialog(open) {
     autoOpen: open || dfm.dialog,
     title: dfm_read.title,
     height: dfm.height,
-    width: 900,
+    width: 'auto',
     resizable: false,
+    draggable: false,
     modal: true,
     buttons: {
       "_(Start)_": function(){
diff --git a/emhttp/plugins/dynamix/DashStats.page b/emhttp/plugins/dynamix/DashStats.page
index 032a7d72b..c97071be3 100644
--- a/emhttp/plugins/dynamix/DashStats.page
+++ b/emhttp/plugins/dynamix/DashStats.page
@@ -1411,7 +1411,7 @@ function contentMgmt() {
   box.dialog({
     title: "_(Tile Management)_",
     height: 'auto',
-    width: 900,
+    width: 'auto',
     resizable: false,
     modal: true,
     buttons: {
diff --git a/emhttp/plugins/dynamix/include/Templates.php b/emhttp/plugins/dynamix/include/Templates.php
index 83948247a..8532684f5 100644
--- a/emhttp/plugins/dynamix/include/Templates.php
+++ b/emhttp/plugins/dynamix/include/Templates.php
@@ -15,9 +15,6 @@
 <input type="file" id="dfm_upload" value="" onchange="startUpload(this.files)" multiple>
 
 <div markdown="1" id="dfm_templateCreateFolder">
-&nbsp;
-: &nbsp;
-
 _(New folder name)_:
 : <input type="text" id="dfm_target" autocomplete="off" spellcheck="false" value="">
 
@@ -63,10 +60,18 @@ _(Source folder)_:
 _(Target folder)_:
 : <input type="text" id="dfm_target" autocomplete="off" spellcheck="false" value="" data-pickcloseonfile="true" data-pickfolders="true" data-pickfilter="HIDE_FILES_FILTER" data-pickmatch="" data-pickroot="" data-picktop="">
 
-<input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_sparse">_(Use sparse option)_</span><br>
-<input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_exist">_(Overwrite existing files)_</span>
-: <span class="dfm_text"></span>
-
+&nbsp;
+: <span class="flex flex-col gap-4">
+  <label for="dfm_sparse" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_sparse">_(Use sparse option)_</span>
+  </label>
+  <label for="dfm_exist" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_exist">_(Overwrite existing files)_</span>
+  </label>
+  <span class="dfm_text"></span>
+</span>
 
 <div class="dfm_info"><i class="fa fa-warning dfm"></i><?=_("This copies the folder and all its content to another folder")?></div>
 </div>
@@ -81,9 +86,18 @@ _(Source folder)_:
 _(Target folder)_:
 : <input type="text" id="dfm_target" autocomplete="off" spellcheck="false" value="" data-pickcloseonfile="true" data-pickfolders="true" data-pickfilter="HIDE_FILES_FILTER" data-pickmatch="" data-pickroot="" data-picktop="">
 
-<input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_sparse">_(Use sparse option)_</span><br>
-<input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_exist">_(Overwrite existing files)_</span>
-: <span class="dfm_text"></span>
+&nbsp;
+: <span class="flex flex-col gap-4">
+  <label for="dfm_sparse" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_sparse">_(Use sparse option)_</span>
+  </label>
+  <label for="dfm_exist" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_exist">_(Overwrite existing files)_</span>
+  </label>
+  <span class="dfm_text"></span>
+</span>
 
 <div class="dfm_info"><i class="fa fa-warning dfm"></i><?=_("This moves the folder and all its content to another folder")?></div>
 </div>
@@ -124,9 +138,18 @@ _(Source file)_:
 _(Target file)_:
 : <input type="text" id="dfm_target" autocomplete="off" spellcheck="false" value="" data-pickcloseonfile="true" data-pickfolders="true" data-pickfilter="" data-pickmatch="" data-pickroot="" data-picktop="">
 
-<input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_sparse">_(Use sparse option)_</span><br>
-<input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_exist">_(Overwrite existing files)_</span>
-: <span class="dfm_text"></span>
+&nbsp;
+: <span class="flex flex-col gap-4">
+  <label for="dfm_sparse" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_sparse">_(Use sparse option)_</span>
+  </label>
+  <label for="dfm_exist" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_exist">_(Overwrite existing files)_</span>
+  </label>
+  <span class="dfm_text"></span>
+</span>
 
 <div class="dfm_info"><i class="fa fa-warning dfm"></i>_(This copies the selected file)_</div>
 </div>
@@ -141,9 +164,18 @@ _(Source file)_:
 _(Target file)_:
 : <input type="text" id="dfm_target" autocomplete="off" spellcheck="false" value="" data-pickcloseonfile="true" data-pickfolders="true" data-pickfilter="" data-pickmatch="" data-pickroot="" data-picktop="">
 
-<input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_sparse">_(Use sparse option)_</span><br>
-<input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_exist">_(Overwrite existing files)_</span>
-: <span class="dfm_text"></span>
+&nbsp;
+: <span class="flex flex-col gap-4">
+  <label for="dfm_sparse" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_sparse">_(Use sparse option)_</span>
+  </label>
+  <label for="dfm_exist" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_exist">_(Overwrite existing files)_</span>
+  </label>
+  <span class="dfm_text"></span>
+</span>
 
 <div class="dfm_info"><i class="fa fa-warning dfm"></i>_(This moves the selected file)_</div>
 </div>
@@ -181,9 +213,18 @@ _(Source)_:
 _(Target)_:
 : <input type="text" id="dfm_target" autocomplete="off" spellcheck="false" value="" data-pickcloseonfile="true" data-pickfolders="true" data-pickfilter="" data-pickmatch="" data-pickroot="" data-picktop="">
 
-<input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_sparse">_(Use sparse option)_</span><br>
-<input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_exist">_(Overwrite existing files)_</span>
-: <span class="dfm_text"></span>
+&nbsp;
+: <span class="flex flex-col gap-4">
+  <label for="dfm_sparse" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_sparse">_(Use sparse option)_</span>
+  </label>
+  <label for="dfm_exist" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_exist">_(Overwrite existing files)_</span>
+  </label>
+  <span class="dfm_text"></span>
+</span>
 
 <div class="dfm_info"><i class="fa fa-warning dfm"></i>_(This copies all the selected sources)_</div>
 </div>
@@ -198,9 +239,18 @@ _(Source)_:
 _(Target)_:
 : <input type="text" id="dfm_target" autocomplete="off" spellcheck="false" value="" data-pickcloseonfile="true" data-pickfolders="true" data-pickfilter="" data-pickmatch="" data-pickroot="" data-picktop="">
 
-<input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_sparse">_(Use sparse option)_</span><br>
-<input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''"><span class="dfm_exist">_(Overwrite existing files)_</span>
-: <span class="dfm_text"></span>
+&nbsp;
+: <span class="flex flex-col gap-4">
+  <label for="dfm_sparse" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_sparse" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_sparse">_(Use sparse option)_</span>
+  </label>
+  <label for="dfm_exist" class="inline-flex flex-wrap items-center gap-4">
+    <input type="checkbox" id="dfm_exist" value="" onchange="this.value=this.checked?'1':''">
+    <span class="dfm_exist">_(Overwrite existing files)_</span>
+  </label>
+  <span class="dfm_text"></span>
+</span>
 
 <div class="dfm_info"><i class="fa fa-warning dfm"></i>_(This moves all the selected sources)_</div>
 </div>
@@ -233,22 +283,30 @@ _(Source)_:
 
 _(New permission)_:
 : <input type="hidden" id="dfm_target" value="">
-  _(Owner)_:<select id="dfm_owner" class="narrow dfm">
-  <?=mk_option(0,'u-rwx',_('No Access'))?>
-  <?=mk_option(0,'u-wx+r',_('Read-only'))?>
-  <?=mk_option(0,'u-x+rw',_('Read/Write'))?>
-  </select>
-  _(Group)_:<select id="dfm_group" class="narrow dfm">
-  <?=mk_option(0,'g-rwx',_('No Access'))?>
-  <?=mk_option(0,'g-wx+r',_('Read-only'))?>
-  <?=mk_option(0,'g-x+rw',_('Read/Write'))?>
-  </select>
-  _(Other)_:<select id="dfm_other" class="narrow dfm">
-  <?=mk_option(0,'o-rwx',_('No Access'))?>
-  <?=mk_option(0,'o-wx+r',_('Read-only'))?>
-  <?=mk_option(0,'o-x+rw',_('Read/Write'))?>
-  </select>
-
+  <label for="dfm_owner" class="inline-flex flex-wrap items-center gap-4">
+    _(Owner)_:
+    <select id="dfm_owner" class="narrow dfm">
+      <?=mk_option(0,'u-rwx',_('No Access'))?>
+      <?=mk_option(0,'u-wx+r',_('Read-only'))?>
+      <?=mk_option(0,'u-x+rw',_('Read/Write'))?>
+    </select>
+  </label>
+  <label for="dfm_group" class="inline-flex flex-wrap items-center gap-4">
+    _(Group)_:
+    <select id="dfm_group" class="narrow dfm">
+    <?=mk_option(0,'g-rwx',_('No Access'))?>
+    <?=mk_option(0,'g-wx+r',_('Read-only'))?>
+    <?=mk_option(0,'g-x+rw',_('Read/Write'))?>
+    </select>
+  </label>
+  <label for="dfm_other" class="inline-flex flex-wrap items-center gap-4">
+    _(Other)_:
+    <select id="dfm_other" class="narrow dfm">
+    <?=mk_option(0,'o-rwx',_('No Access'))?>
+    <?=mk_option(0,'o-wx+r',_('Read-only'))?>
+    <?=mk_option(0,'o-x+rw',_('Read/Write'))?>
+    </select>
+  </label>
 &nbsp;
 : <span class="dfm_text"></span>
 
@@ -310,7 +368,6 @@ $('#dfm_viewer').click();
 
 <div id="dfm_templateJobs">
 <!--!
-<style>div#dfm_jobs{position:absolute;top:0;bottom:0;left:0;right:0;line-height:3rem}</style>
 <div id="dfm_jobs"></div>
 <script>
 $.post('/webGui/include/Control.php',{mode:'jobs'},function(jobs){
diff --git a/emhttp/plugins/dynamix/sheets/BrowseButton.css b/emhttp/plugins/dynamix/sheets/BrowseButton.css
index 97232f481..5742c5fb6 100644
--- a/emhttp/plugins/dynamix/sheets/BrowseButton.css
+++ b/emhttp/plugins/dynamix/sheets/BrowseButton.css
@@ -23,26 +23,18 @@
 #user-notice {
     float: left;
 }
-div.dfm_info {
+/* div.dfm_info {
     position: absolute;
     bottom: 4px;
     width: 74%;
     margin-left: 23%;
-}
+} */
 div.dfm_template {
     display: none;
 }
 div#dfm_dialogWindow {
     overflow-x: hidden;
 }
-div#dfm_dialogWindow dt {
-    width: 23%;
-}
-div#dfm_joblist {
-    text-align: left;
-    margin-top: 20px;
-    margin-left: 56px;
-}
 span.dfm_loc {
     display: inline-block;
 }
@@ -53,7 +45,7 @@ span.dfm_text {
 }
 span.dfm_device {
     display: inline-block;
-    float: left;
+    /* float: left; */
 }
 span.dfm_percent {
     display: inline-block;
@@ -68,15 +60,15 @@ input#dfm_sparse,
 input#dfm_exist {
     margin-left: 0;
 }
-select.dfm {
+/* select.dfm {
     margin: 0 40px 0 10px;
-}
+} */
 select#dfm_source {
     min-width: none;
     max-width: none;
     border: none;
     background-image: none;
-    width: 660px;
+    /* width: 660px; */
     cursor: default;
 }
 select#dfm_source option {
@@ -94,7 +86,7 @@ i.job {
     background: transparent;
     border: none;
     font-size: 1.8rem !important;
-    margin-top: -14px !important;
+    margin-top: -20px !important;
     margin-right: -18px !important;
 }
 .ui-dfm .ui-dialog-titlebar-close:hover {
@@ -106,10 +98,6 @@ i.job {
     width: 100%;
     font-size: 1.8rem;
 }
-.ui-dfm .ui-dialog-content {
-    padding-top: 15px;
-    vertical-align: bottom;
-}
 .ui-dfm .ui-button-text {
     padding: 0px 5px;
 }
@@ -198,7 +186,6 @@ input.dfm_filter:focus {
 }
 input#dfm_target {
     color: var(--input-dfm-target-text-color);
-    width: 500px;
 }
 /* .fileTree {
     width: 500px;
@@ -211,7 +198,9 @@ div.autoheight {
     width: 100%;
     overflow-y: auto;
 }
-
+#dfm_jobs {
+    padding: 2rem 0;
+}
 .Theme--sidebar {
     span.dfm_filter {
         margin-left: 0;
diff --git a/emhttp/plugins/dynamix/styles/default-dynamix.css b/emhttp/plugins/dynamix/styles/default-dynamix.css
index 34986f044..b88cadb95 100644
--- a/emhttp/plugins/dynamix/styles/default-dynamix.css
+++ b/emhttp/plugins/dynamix/styles/default-dynamix.css
@@ -1460,6 +1460,36 @@ div.icon-zip {
 }
 
 .ui-dialog {
+    /* Center the dialog no matter what */
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    box-sizing: border-box;
+    min-width: 95vw;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    .ui-dialog-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: auto !important;
+        max-height: 70vh;
+        overflow-y: auto;
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+
+        dl {
+            width: 100%;
+        }
+    }
+
+    .dfm_info {
+        margin-top: auto;
+    }
+
     .ui-dialog-buttonpane {
         .ui-dialog-buttonset {
             button {