feat: added fillAvailableHeight js to dynamically resize vertical elements

- Updated PHP opening tags from `<?PHP` to `<?php` for consistency.
- Reformatted code for improved readability in Syslog.page.
- Added a new function `fillAvailableHeight` in BodyInlineJS.php to dynamically resize elements for better layout.
- Updated CSS to remove unnecessary gap and margin for a cleaner design in Syslog.css.
- Enhanced the syslog controls and output structure for improved usability.

emhttp/plugins/dynamix/Syslog.page

@@ -3,7 +3,7 @@ Title="System Log"
 Icon="icon-log"
 Tag="list"
 ---
-<?PHP
+<?php
 /* Copyright 2005-2023, Lime Technology
  * Copyright 2012-2023, Bergware International.
  *
@@ -15,8 +15,8 @@ Tag="list"
  * all copies or substantial portions of the Software.
  */
 ?>
-<?
-$zip    = htmlspecialchars(str_replace(' ','_',strtolower($var['NAME'])));
+<?php
+$zip    = htmlspecialchars(str_replace(' ', '_', strtolower($var['NAME'])));
 $log    = '/var/log/syslog';
 $prev   = '/boot/logs/syslog-previous';
 $cfg    = '/boot/config/rsyslog.cfg';
@@ -24,21 +24,23 @@ $max    = 5000;
 $select = [];
 $logs   = [];
 if (file_exists($cfg)) {
-  $syslog = parse_ini_file($cfg);
-  if (!empty($syslog['local_server']) && !empty($syslog['server_folder']) && $logs = glob($syslog['server_folder'].'/syslog-*.log',GLOB_NOSORT)) {
-    natsort($logs);
-  }
+    $syslog = parse_ini_file($cfg);
+    if (!empty($syslog['local_server']) && !empty($syslog['server_folder']) && $logs = glob($syslog['server_folder'].'/syslog-*.log', GLOB_NOSORT)) {
+        natsort($logs);
+    }
 }
 if (file_exists($prev)) {
-  // add syslog-previous to front of logs array
-  array_unshift($logs, $prev);
+    // add syslog-previous to front of logs array
+    array_unshift($logs, $prev);
 }
 if (count($logs)) {
-  // add syslog to front of logs array
-  array_unshift($logs, $log);
-  $select[] = "<select onchange='showLog(this.value)'>";
-  foreach ($logs as $file) $select[] = mk_option(1,$file,basename($file));
-  $select[] = "</select>";
+    // add syslog to front of logs array
+    array_unshift($logs, $log);
+    $select[] = "<select onchange='showLog(this.value)'>";
+    foreach ($logs as $file) {
+        $select[] = mk_option(1, $file, basename($file));
+    }
+    $select[] = "</select>";
 }
 $select = implode($select);
 ?>
@@ -85,11 +87,6 @@ function toggle(checked) {
   highlight(checked,'L');
   $('span.label input[type=checkbox]').not('.ctrl').prop('checked',checked);
 }
-<?if (_var($display,'resize')):?>
-function resize() {
-  $('pre.up').height(Math.max(window.innerHeight-320,330));
-}
-<?endif;?>
 
 function showLog(log) {
 	logfile = log;
@@ -142,21 +139,21 @@ $(function() {
     }
   });
 <?if (_var($display,'resize')):?>
-  resize();
-  $(window).bind('resize',function(){resize();});
+  fillAvailableHeight();
+  $(window).bind('resize',function(){fillAvailableHeight();});
 <?endif;?>
   showLog(logfile);
 });
 // $('.title .right').append("");
 </script>
 
-<div class="syslog-controls">
+<div class="js-syslog-controls syslog-controls">
   <div class="flex flex-row justify-between items-center gap-4 flex-wrap w-full">
     <div class="flex flex-row items-center gap-4">
       <div class="lite label">
         <label class="flex flex-row items-center gap-2">
           <span class="flex-shrink-0">_(Log size)_:</span>
-          <input type="number" id="max" value="" placeholder="<?=$max?>" class="w-20">
+          <input type="number" id="max" value="" placeholder="<?=$max?>">
         </label>
       </div>
 
@@ -217,10 +214,12 @@ $(function() {
   </div>
 </div>
 
-<pre class="up"></pre>
+<pre class="js-syslog-output up"></pre>
 
-<div class="flex flex-row items-center gap-2">
+<div class="js-syslog-actions flex flex-row items-center gap-2">
   <input type="button" id="download" value="_(Download)_" onclick="syslog(zipfile())">
   <input type="button" value="_(Refresh)_" onclick="showLog(logfile)">
   <input type="button" value="_(Done)_" onclick="done()">
-</div>
+</div>
+
+<!-- potentially add a .page option that adds classses to the neccesary elements to ensure content fills the space on the page and then we dont rely on JS for the resiize option-->

emhttp/plugins/dynamix/include/DefaultPageLayout/BodyInlineJS.php

@@ -446,4 +446,81 @@ function nchanFocusStop(banner=true) {
   }
 }
 <?endif;?>
+
+/**
+ * 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));
+}
 </script>

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;
 
     * {