From 1e2ba501c081281d2fe010c702a8f3e55e01f8e4 Mon Sep 17 00:00:00 2001 From: Zack Spear Date: Thu, 26 Jun 2025 14:09:36 -0700 Subject: [PATCH 01/10] feat: added fillAvailableHeight js to dynamically resize vertical elements - Updated PHP opening tags from ` -"; - foreach ($logs as $file) $select[] = mk_option(1,$file,basename($file)); - $select[] = ""; + // add syslog to front of logs array + array_unshift($logs, $log); + $select[] = ""; } $select = implode($select); ?> @@ -85,11 +87,6 @@ function toggle(checked) { highlight(checked,'L'); $('span.label input[type=checkbox]').not('.ctrl').prop('checked',checked); } - -function resize() { - $('pre.up').height(Math.max(window.innerHeight-320,330)); -} - function showLog(log) { logfile = log; @@ -142,21 +139,21 @@ $(function() { } }); - resize(); - $(window).bind('resize',function(){resize();}); + fillAvailableHeight(); + $(window).bind('resize',function(){fillAvailableHeight();}); showLog(logfile); }); // $('.title .right').append(""); -
+
@@ -217,10 +214,12 @@ $(function() {
-

+

 
-

+

   
   
   
-

\ No newline at end of file
+

+
+
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index 4215ffc51..9d59a0855 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -446,4 +446,81 @@ function nchanFocusStop(banner=true) {
   }
 }
 
+
+/**
+ * Calculates and sets the height of a target element to fill the available viewport space.
+ * 
+ * This function dynamically resizes an element to occupy the remaining vertical space
+ * after accounting for other page elements like headers, footers, controls, and their
+ * margins/padding. Useful for creating full-height scrollable content areas.
+ * 
+ * @param {Object} params - Configuration object for height calculation
+ * @param {string} params.targetElementSelector - CSS selector for the element to resize
+ * @param {string[]} params.elementSelectorsForHeight - Array of CSS selectors for elements 
+ *   whose full height (including margins) should be subtracted from available space
+ * @param {string[]} params.elementSelectorsForSpacing - Array of CSS selectors for elements 
+ *   whose spacing (margins and padding only) should be subtracted from available space
+ * @param {number} params.manualSpacingOffset - Additional pixels to subtract for manual spacing
+ * 
+ * @example
+ * // Use with default parameters
+ * fillAvailableHeight();
+ * 
+ * @example
+ * // Custom configuration
+ * fillAvailableHeight({
+ *   targetElementSelector: '.my-content',
+ *   elementSelectorsForHeight: ['#header', '#footer'],
+ *   elementSelectorsForSpacing: ['.my-content'],
+ *   manualSpacingOffset: 20
+ * });
+ */
+function fillAvailableHeight(params = { // default params
+  targetElementSelector: '.js-syslog-output',
+  elementSelectorsForHeight: [
+    '#header',
+    '#menu',
+    '.title',
+    '.js-syslog-controls',
+    '.js-syslog-actions',
+    '#footer',
+  ],
+  elementSelectorsForSpacing: [
+    '.js-syslog-output',
+    '.displaybox',
+  ],
+  manualSpacingOffset: 10,
+}) {
+  const minHeight = 330;
+  // elements with a height and margin we want to subtract from the target height
+  let targetHeight = window.innerHeight - params.elementSelectorsForHeight.reduce((acc, selector) => {
+    const element = document.querySelector(selector);
+    if (!element) return acc;
+
+    const computedStyle = getComputedStyle(element);
+    const height = element.offsetHeight;
+    const marginTop = parseFloat(computedStyle.marginTop) || 0;
+    const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
+
+    return acc + height + marginTop + marginBottom;
+  }, 0);
+  // elements with spacing that we want to subtract from the target height
+  targetHeight -= params.elementSelectorsForSpacing.reduce((acc, selector) => {
+    const element = document.querySelector(selector);
+    if (!element) return acc;
+
+    const computedStyle = getComputedStyle(element);
+    const marginTop = parseFloat(computedStyle.marginTop) || 0;
+    const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
+    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+
+    return acc + marginTop + marginBottom + paddingTop + paddingBottom;
+  }, 0);
+
+  // subtract 10px from the target height to provide spacing between the actions & the footer
+  targetHeight -= params.manualSpacingOffset || 0;
+
+  $(params.targetElementSelector).height(Math.max(targetHeight, minHeight));
+}
 
diff --git a/emhttp/plugins/dynamix/sheets/Syslog.css b/emhttp/plugins/dynamix/sheets/Syslog.css
index a418409f7..11ce7c2b8 100644
--- a/emhttp/plugins/dynamix/sheets/Syslog.css
+++ b/emhttp/plugins/dynamix/sheets/Syslog.css
@@ -6,8 +6,6 @@ input#max {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
     box-sizing: border-box;
 
     * {

From 006344c646392c3f1501b5919c93fd616d4e59cb Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Thu, 26 Jun 2025 14:20:36 -0700
Subject: [PATCH 02/10] refactor: enhance fillAvailableHeight function for
 dynamic resizing

- Updated the fillAvailableHeight function in BodyInlineJS.php to accept parameters for better flexibility in resizing elements.
- Modified Syslog.page to utilize the new parameters for dynamic height adjustment of specific elements.
- Improved code readability and maintainability by restructuring the function and its parameters.
---
 emhttp/plugins/dynamix/Syslog.page            | 15 ++++-
 .../DefaultPageLayout/BodyInlineJS.php        | 62 +++++++++++--------
 2 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/emhttp/plugins/dynamix/Syslog.page b/emhttp/plugins/dynamix/Syslog.page
index 73673bbf3..deadafd65 100644
--- a/emhttp/plugins/dynamix/Syslog.page
+++ b/emhttp/plugins/dynamix/Syslog.page
@@ -139,8 +139,19 @@ $(function() {
     }
   });
 
-  fillAvailableHeight();
-  $(window).bind('resize',function(){fillAvailableHeight();});
+  const fillAvailableHeightParams = {
+    targetElementSelector: '.js-syslog-output',
+    elementSelectorsForHeight: [
+      '.title',
+      '.js-syslog-controls',
+      '.js-syslog-actions',
+    ],
+    elementSelectorsForSpacing: [
+      '.js-syslog-output',
+    ],
+  };
+  fillAvailableHeight(fillAvailableHeightParams);
+  $(window).bind('resize',function(){fillAvailableHeight(fillAvailableHeightParams);});
 
   showLog(logfile);
 });
diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index 9d59a0855..6e3ff6584 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -454,46 +454,52 @@ function nchanFocusStop(banner=true) {
  * after accounting for other page elements like headers, footers, controls, and their
  * margins/padding. Useful for creating full-height scrollable content areas.
  * 
+ * The function includes default elements that are commonly present on pages:
+ * - elementsForHeight: '#header', '#menu', '#footer' (plus any additional provided)
+ * - elementsForSpacing: '.displaybox' (plus any additional provided)
+ * 
  * @param {Object} params - Configuration object for height calculation
- * @param {string} params.targetElementSelector - CSS selector for the element to resize
- * @param {string[]} params.elementSelectorsForHeight - Array of CSS selectors for elements 
- *   whose full height (including margins) should be subtracted from available space
- * @param {string[]} params.elementSelectorsForSpacing - Array of CSS selectors for elements 
- *   whose spacing (margins and padding only) should be subtracted from available space
- * @param {number} params.manualSpacingOffset - Additional pixels to subtract for manual spacing
+ * @param {string} [params.targetElementSelector='.js-fill-available-height'] - CSS selector for the element to resize
+ * @param {string[]} [params.elementSelectorsForHeight=[]] - Additional CSS selectors for elements 
+ *   whose full height (including margins) should be subtracted from available space.
+ *   These are added to the default selectors: '#header', '#menu', '#footer'
+ * @param {string[]} [params.elementSelectorsForSpacing=[]] - Additional CSS selectors for elements 
+ *   whose spacing (margins and padding only) should be subtracted from available space.
+ *   These are added to the default selector: '.displaybox'
+ * @param {number} [params.minHeight=330] - Minimum height in pixels for the target element
+ * @param {number} [params.manualSpacingOffset=10] - Additional pixels to subtract for manual spacing
  * 
  * @example
- * // Use with default parameters
+ * // Use with default parameters - targets '.js-fill-available-height'
  * fillAvailableHeight();
  * 
  * @example
- * // Custom configuration
+ * // Custom configuration with additional elements
  * fillAvailableHeight({
  *   targetElementSelector: '.my-content',
- *   elementSelectorsForHeight: ['#header', '#footer'],
+ *   elementSelectorsForHeight: ['.my-controls', '.my-actions'],
  *   elementSelectorsForSpacing: ['.my-content'],
+ *   minHeight: 500,
  *   manualSpacingOffset: 20
  * });
  */
 function fillAvailableHeight(params = { // default params
-  targetElementSelector: '.js-syslog-output',
-  elementSelectorsForHeight: [
-    '#header',
-    '#menu',
-    '.title',
-    '.js-syslog-controls',
-    '.js-syslog-actions',
-    '#footer',
-  ],
-  elementSelectorsForSpacing: [
-    '.js-syslog-output',
-    '.displaybox',
-  ],
+  targetElementSelector: '.js-fill-available-height',
+  elementSelectorsForHeight: [],
+  elementSelectorsForSpacing: [],
+  minHeight: 330,
   manualSpacingOffset: 10,
 }) {
-  const minHeight = 330;
+  const minHeight = params.minHeight || 330;
+  // default elementsForHeight
+  const elementsForHeight = [
+    '#header',
+    '#menu',
+    '#footer',
+  ];
+  elementsForHeight.push(...params.elementSelectorsForHeight || []);
   // elements with a height and margin we want to subtract from the target height
-  let targetHeight = window.innerHeight - params.elementSelectorsForHeight.reduce((acc, selector) => {
+  let targetHeight = window.innerHeight - elementsForHeight.reduce((acc, selector) => {
     const element = document.querySelector(selector);
     if (!element) return acc;
 
@@ -505,7 +511,11 @@ function fillAvailableHeight(params = { // default params
     return acc + height + marginTop + marginBottom;
   }, 0);
   // elements with spacing that we want to subtract from the target height
-  targetHeight -= params.elementSelectorsForSpacing.reduce((acc, selector) => {
+  const elementsForSpacing = [
+    '.displaybox',
+  ];
+  elementsForSpacing.push(...params.elementSelectorsForSpacing || []);
+  targetHeight -= elementsForSpacing.reduce((acc, selector) => {
     const element = document.querySelector(selector);
     if (!element) return acc;
 
@@ -519,7 +529,7 @@ function fillAvailableHeight(params = { // default params
   }, 0);
 
   // subtract 10px from the target height to provide spacing between the actions & the footer
-  targetHeight -= params.manualSpacingOffset || 0;
+  targetHeight -= params.manualSpacingOffset || 10;
 
   $(params.targetElementSelector).height(Math.max(targetHeight, minHeight));
 }

From adb30a1214d95ffb86af79dfd0ae3b9fb14dd2be Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Thu, 26 Jun 2025 14:27:33 -0700
Subject: [PATCH 03/10] docs: update fillAvailableHeight example for jQuery
 usage

- Modified the documentation comment for the fillAvailableHeight function in BodyInlineJS.php to specify that it must be used within a jQuery ready function.
- Ensured clarity in the example usage to improve developer understanding and implementation.
---
 .../include/DefaultPageLayout/BodyInlineJS.php    | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index 6e3ff6584..48e4a49d8 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -475,12 +475,15 @@ function nchanFocusStop(banner=true) {
  * 
  * @example
  * // Custom configuration with additional elements
- * fillAvailableHeight({
- *   targetElementSelector: '.my-content',
- *   elementSelectorsForHeight: ['.my-controls', '.my-actions'],
- *   elementSelectorsForSpacing: ['.my-content'],
- *   minHeight: 500,
- *   manualSpacingOffset: 20
+ * // MUST BE USED IN JQUERY ON READY
+ * $(function() { // or $(document).ready(function() {
+ *   fillAvailableHeight({
+ *     targetElementSelector: '.my-content',
+ *     elementSelectorsForHeight: ['.my-controls', '.my-actions'],
+ *     elementSelectorsForSpacing: ['.my-content'],
+ *     minHeight: 500,
+ *     manualSpacingOffset: 20
+ *   });
  * });
  */
 function fillAvailableHeight(params = { // default params

From 65360afc9d6c30d26d8c34fcf0e402fe0260cb16 Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Thu, 26 Jun 2025 14:35:27 -0700
Subject: [PATCH 04/10] refactor: update PageMap.page for dynamic height
 adjustment

- Replaced the existing resize function with fillAvailableHeight for better dynamic resizing of elements.
- Wrapped the map display in a new div with class 'js-fill-available-height' for improved structure.
- Ensured the 'Done' button is now within a separate 'js-actions' div for clearer layout.
---
 emhttp/plugins/dynamix/PageMap.page | 33 +++++++++++++++++++----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/emhttp/plugins/dynamix/PageMap.page b/emhttp/plugins/dynamix/PageMap.page
index 38f16dbc3..6dca635d5 100644
--- a/emhttp/plugins/dynamix/PageMap.page
+++ b/emhttp/plugins/dynamix/PageMap.page
@@ -17,12 +17,18 @@ Tag="map-o"
 ?>
 
 
 
@@ -57,10 +63,15 @@ foreach($uri as $more) {
     $language = array_merge($language,unserialize(file_get_contents($store)));
   }
 }
-
-echo "
";
-show_map("Tasks", 1);
-show_map("Buttons", 1);
-echo "
";
 ?>
-
+
+

+  
+

+
+

+  
+


From 3e734b091475c9921a89ebf285f7706ce9c0ae72 Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Fri, 27 Jun 2025 11:58:47 -0700
Subject: [PATCH 05/10] refactor: enhance fillAvailableHeight function for
 additional element selectors

- Updated the fillAvailableHeight function in BodyInlineJS.php to include additional element selectors for height and spacing calculations.
- Improved the handling of dynamic height adjustments by allowing more flexible parameter inputs.
- Clarified comments for better understanding of the height and spacing logic.
---
 .../include/DefaultPageLayout/BodyInlineJS.php        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index 48e4a49d8..80b670891 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -499,8 +499,9 @@ function fillAvailableHeight(params = { // default params
     '#header',
     '#menu',
     '#footer',
+    '.title',
+    ...(params.elementSelectorsForHeight ? [params.elementSelectorsForHeight] : []),
   ];
-  elementsForHeight.push(...params.elementSelectorsForHeight || []);
   // elements with a height and margin we want to subtract from the target height
   let targetHeight = window.innerHeight - elementsForHeight.reduce((acc, selector) => {
     const element = document.querySelector(selector);
@@ -510,14 +511,16 @@ function fillAvailableHeight(params = { // default params
     const height = element.offsetHeight;
     const marginTop = parseFloat(computedStyle.marginTop) || 0;
     const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
+    // we don't need to calculate padding because it's already included in the height
 
     return acc + height + marginTop + marginBottom;
   }, 0);
-  // elements with spacing that we want to subtract from the target height
+  // elements with spacing that we want to subtract from the target height, but not their actual height.
   const elementsForSpacing = [
     '.displaybox',
+    ...(params.targetElementSelector ? [params.targetElementSelector] : []),
+    ...(params.elementSelectorsForSpacing ? params.elementSelectorsForSpacing : []),
   ];
-  elementsForSpacing.push(...params.elementSelectorsForSpacing || []);
   targetHeight -= elementsForSpacing.reduce((acc, selector) => {
     const element = document.querySelector(selector);
     if (!element) return acc;
@@ -531,7 +534,7 @@ function fillAvailableHeight(params = { // default params
     return acc + marginTop + marginBottom + paddingTop + paddingBottom;
   }, 0);
 
-  // subtract 10px from the target height to provide spacing between the actions & the footer
+  // subtract addtional spacing from the target height to provide spacing between the actions & the footer
   targetHeight -= params.manualSpacingOffset || 10;
 
   $(params.targetElementSelector).height(Math.max(targetHeight, minHeight));

From bb87d4d370593d2bf597662a1207da3b2f528b3a Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Fri, 27 Jun 2025 12:08:30 -0700
Subject: [PATCH 06/10] feat: add debounce function for improved performance in
 HeadInlineJS

- Introduced a new debounce function in HeadInlineJS.php to optimize function calls by limiting the rate at which a function can fire.
- This enhancement aims to improve performance in scenarios where rapid function calls may occur, such as during user input events.
---
 .../dynamix/include/DefaultPageLayout/HeadInlineJS.php    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
index 3a7c5e185..5a7f2bd89 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/HeadInlineJS.php
@@ -562,4 +562,12 @@ $.ajaxPrefilter(function(s, orig, xhr){
     }
     setTimerReload();
 
+
+function debounce(func, wait = 300) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
 

From dde0cd1f08c2b9dfa21eafddac137330542634d4 Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Fri, 27 Jun 2025 12:20:52 -0700
Subject: [PATCH 07/10] feat: implement resize listener for fillAvailableHeight
 function

- Added a resize event listener to the fillAvailableHeight function in BodyInlineJS.php to ensure dynamic height adjustments on window resize.
- Implemented a debounced handler to optimize performance and prevent excessive function calls during rapid resize events.
- This enhancement improves the responsiveness of the layout by maintaining appropriate element heights as the window size changes.
---
 .../include/DefaultPageLayout/BodyInlineJS.php     | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index 80b670891..131d69d5c 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -538,5 +538,19 @@ function fillAvailableHeight(params = { // default params
   targetHeight -= params.manualSpacingOffset || 10;
 
   $(params.targetElementSelector).height(Math.max(targetHeight, minHeight));
+
+  // Set up resize listener to call itself with same params
+  // Remove existing listener first to avoid duplicates
+  if (window.fillAvailableHeightResizeHandler) {
+    window.removeEventListener('resize', window.fillAvailableHeightResizeHandler);
+  }
+  
+  // Create debounced handler that calls this function with same params
+  window.fillAvailableHeightResizeHandler = debounce(function() {
+    fillAvailableHeight(params);
+  }, 150);
+  
+  // Add the new listener
+  window.addEventListener('resize', window.fillAvailableHeightResizeHandler);
 }
 

From 77efe32856b1b1b325c731ec2491cc9b9a1759f8 Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Fri, 27 Jun 2025 12:21:03 -0700
Subject: [PATCH 08/10] refactor: standardize fillAvailableHeight usage across
 pages

- Replaced existing resize functions with fillAvailableHeight calls in multiple pages for consistent dynamic height adjustments.
- Updated PageMap.page, Processes.page, Syslog.page, Vars.page, DockerContainers.page, VMMachines.page to utilize fillAvailableHeight with appropriate parameters.
- Wrapped relevant elements in 'js-fill-available-height' and 'js-actions' divs for improved structure and layout clarity.
---
 .../DockerContainers.page                     | 55 +++++++++++--------
 .../dynamix.vm.manager/VMMachines.page        | 38 ++++++++-----
 emhttp/plugins/dynamix/PageMap.page           | 15 ++---
 emhttp/plugins/dynamix/Processes.page         | 21 ++++---
 emhttp/plugins/dynamix/Syslog.page            | 30 ++++------
 emhttp/plugins/dynamix/Vars.page              | 31 ++++++-----
 6 files changed, 102 insertions(+), 88 deletions(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
index 62adc22b0..a3d16bef8 100644
--- a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
+++ b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
@@ -44,17 +44,20 @@ $cpus    = cpu_list();
                 _(Uptime)_
             
         
-        
+        
     
 

-
-
-
-
-
-
-
-
+
+

+  
+  
+  
+  
+  
+  
+  
+  
+

 
 
 
@@ -66,15 +69,6 @@ $('.title').append("");
 
-
-function resize() {
-  $('#docker_list').height(Math.max(window.innerHeight-340,330));
-  $('#docker_containers thead,#docker_containers tbody').removeClass('fixed');
-  $('#docker_containers thead tr th').each(function(){$(this).width($(this).width());});
-  $('#docker_containers tbody tr td').each(function(){$(this).width($(this).width());});
-  $('#docker_containers thead,#docker_containers tbody').addClass('fixed');
-}
-
 function resetSorting() {
   if ($.cookie('lockbutton')==null) return;
   $('input[type=button]').prop('disabled',true);
@@ -146,10 +140,6 @@ function loadlist(init) {
       }
     });
     $('head').append('
 
 
diff --git a/emhttp/plugins/dynamix/Processes.page b/emhttp/plugins/dynamix/Processes.page
index 5b6223110..6abcfe81f 100644
--- a/emhttp/plugins/dynamix/Processes.page
+++ b/emhttp/plugins/dynamix/Processes.page
@@ -17,16 +17,19 @@ Tag="cogs"
 ?>
 
 
 
-",shell_exec('ps -aux'),"";
-?>
-
+
+

+
+

+  
+

diff --git a/emhttp/plugins/dynamix/Syslog.page b/emhttp/plugins/dynamix/Syslog.page
index deadafd65..f68208c03 100644
--- a/emhttp/plugins/dynamix/Syslog.page
+++ b/emhttp/plugins/dynamix/Syslog.page
@@ -138,24 +138,18 @@ $(function() {
       showLog(logfile);
     }
   });
-
-  const fillAvailableHeightParams = {
-    targetElementSelector: '.js-syslog-output',
-    elementSelectorsForHeight: [
-      '.title',
-      '.js-syslog-controls',
-      '.js-syslog-actions',
-    ],
-    elementSelectorsForSpacing: [
-      '.js-syslog-output',
-    ],
-  };
-  fillAvailableHeight(fillAvailableHeightParams);
-  $(window).bind('resize',function(){fillAvailableHeight(fillAvailableHeightParams);});
-
   showLog(logfile);
+
+  
+  fillAvailableHeight({
+      targetElementSelector: '.js-fill-available-height',
+      elementSelectorsForHeight: [
+        '.js-syslog-controls',
+        '.js-syslog-actions',
+      ],
+    });
+  
 });
-// $('.title .right').append("");
 
 
 

@@ -225,12 +219,10 @@ $(function() {
   

 

 
-

+

 
 

   
   
   
 

-
-
\ No newline at end of file
diff --git a/emhttp/plugins/dynamix/Vars.page b/emhttp/plugins/dynamix/Vars.page
index 55b9d5c21..7fce7fb4f 100644
--- a/emhttp/plugins/dynamix/Vars.page
+++ b/emhttp/plugins/dynamix/Vars.page
@@ -15,23 +15,28 @@ Tag="code"
  * all copies or substantial portions of the Software.
  */
 ?>
-
-
-
  getenv('http_proxy'), 'no_proxy' => getenv('no_proxy')];
-echo "
",htmlspecialchars(print_r($globals,true)),"
";
 ?>
-
+
+
+
+
+

+
+

+  
+


From 445deceb09d94ff85c9be1297b56a92be1b9f50c Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Fri, 27 Jun 2025 12:36:54 -0700
Subject: [PATCH 09/10] refactor: improve fillAvailableHeight function for
 better element height calculations

- Enhanced the fillAvailableHeight function in BodyInlineJS.php to refine height calculations by ensuring proper handling of element selectors and margins.
- Adjusted logic to prevent unnecessary spacing for specific elements, improving layout accuracy.
- Cleaned up code for better readability and maintainability.
---
 .../DefaultPageLayout/BodyInlineJS.php        | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
index 131d69d5c..8b14cbf57 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php
@@ -492,52 +492,69 @@ function fillAvailableHeight(params = { // default params
   elementSelectorsForSpacing: [],
   minHeight: 330,
   manualSpacingOffset: 10,
-}) {
+}) {  
   const minHeight = params.minHeight || 330;
+
   // default elementsForHeight
   const elementsForHeight = [
     '#header',
     '#menu',
     '#footer',
     '.title',
-    ...(params.elementSelectorsForHeight ? [params.elementSelectorsForHeight] : []),
+    ...(params.elementSelectorsForHeight ? params.elementSelectorsForHeight : []),
   ];
+
   // elements with a height and margin we want to subtract from the target height
   let targetHeight = window.innerHeight - elementsForHeight.reduce((acc, selector) => {
     const element = document.querySelector(selector);
-    if (!element) return acc;
+
+    if (!element) {
+      return acc;
+    }
 
     const computedStyle = getComputedStyle(element);
     const height = element.offsetHeight;
     const marginTop = parseFloat(computedStyle.marginTop) || 0;
     const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
     // we don't need to calculate padding because it's already included in the height
+    const totalForElement = height + marginTop + marginBottom;
 
-    return acc + height + marginTop + marginBottom;
+    return acc + totalForElement;
   }, 0);
+  
   // elements with spacing that we want to subtract from the target height, but not their actual height.
   const elementsForSpacing = [
-    '.displaybox',
+    '#displaybox',
     ...(params.targetElementSelector ? [params.targetElementSelector] : []),
     ...(params.elementSelectorsForSpacing ? params.elementSelectorsForSpacing : []),
   ];
+  
   targetHeight -= elementsForSpacing.reduce((acc, selector) => {
     const element = document.querySelector(selector);
-    if (!element) return acc;
+
+    if (!element) {
+      return acc;
+    }
 
     const computedStyle = getComputedStyle(element);
     const marginTop = parseFloat(computedStyle.marginTop) || 0;
-    const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
+    const marginBottom = selector !== '#displaybox' ? parseFloat(computedStyle.marginBottom) || 0 : 0;
     const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+    const paddingBottom = selector !== '#displaybox' ? parseFloat(computedStyle.paddingBottom) || 0 : 0;
+    // we don't want to subtract paddingBottom or marginBottom for #displaybox b/c it adds unnecessary spacing in the calculations
+    // b/c the paddingBottom is accounting for the fixed footer.
 
-    return acc + marginTop + marginBottom + paddingTop + paddingBottom;
+    const totalForElement = marginTop + marginBottom + paddingTop + paddingBottom;
+
+    return acc + totalForElement;
   }, 0);
 
   // subtract addtional spacing from the target height to provide spacing between the actions & the footer
   targetHeight -= params.manualSpacingOffset || 10;
 
-  $(params.targetElementSelector).height(Math.max(targetHeight, minHeight));
+  const finalHeight = Math.max(targetHeight, minHeight);
+
+  $(params.targetElementSelector).height(finalHeight);
 
   // Set up resize listener to call itself with same params
   // Remove existing listener first to avoid duplicates

From fefc4c5bba0612e66fbd0717450bbcc37830d8b9 Mon Sep 17 00:00:00 2001
From: Zack Spear 
Date: Fri, 27 Jun 2025 12:43:41 -0700
Subject: [PATCH 10/10] fix: add manualSpacingOffset to fillAvailableHeight VMs
 & Dockers for improved layout

- Introduced manualSpacingOffset parameter in DockerContainers.page and VMMachines.page to prevent unwanted scrollable space in the main content.
- Updated fillAvailableHeight calls to include this parameter, enhancing the overall layout consistency across pages.
---
 .../DockerContainers.page                     |  1 +
 .../dynamix.vm.manager/VMMachines.page        | 43 +++++++++++--------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
index a3d16bef8..450518481 100644
--- a/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
+++ b/emhttp/plugins/dynamix.docker.manager/DockerContainers.page
@@ -177,6 +177,7 @@ function loadlist(init) {
             '.js-actions',
             '#docker_containers thead',
           ],
+          manualSpacingOffset: 30, // without this, the main content will still be scrollable by like 20px
         });
         resizeTableColumns()
         if (init) {
diff --git a/emhttp/plugins/dynamix.vm.manager/VMMachines.page b/emhttp/plugins/dynamix.vm.manager/VMMachines.page
index 1b1ad19a1..aed7115b2 100644
--- a/emhttp/plugins/dynamix.vm.manager/VMMachines.page
+++ b/emhttp/plugins/dynamix.vm.manager/VMMachines.page
@@ -437,25 +437,6 @@ function loadlist() {
     var data = d.split(/\0/);
     $('#kvm_list').html(data[0]);
     $('head').append('