From b133d102ab39d9aff4bda1dabbdbbb56368c0941 Mon Sep 17 00:00:00 2001
From: jokob-sk <jokob.sk@gmail.com>
Date: Fri, 10 Jul 2026 11:57:38 +1000
Subject: [PATCH] BE: css fixes

---
 front/changeLog.php                     | 10 ++++++---
 front/changeLogCore.php                 |  4 ++--
 front/css/app.css                       | 30 +++++++++++++++++++------
 front/deviceDetails.php                 |  9 +++++++-
 front/js/common.js                      |  7 +-----
 front/php/templates/skel_change_log.php |  4 ++--
 6 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/front/changeLog.php b/front/changeLog.php
index 92aa7582..675594d6 100644
--- a/front/changeLog.php
+++ b/front/changeLog.php
@@ -2,9 +2,13 @@
 require 'php/templates/header.php';
 ?>
 <div class="content-wrapper changeHistoryPage spinnerTarget" id="changeHistoryPage">
-<?php
-  require 'changeLogCore.php';
-?>
+  <div class="content" >
+    <div class="tab-content box">
+      <?php
+        require 'changeLogCore.php';
+      ?>
+    </div>
+  </div>
 </div>
 
 
diff --git a/front/changeLogCore.php b/front/changeLogCore.php
index 4b47f52a..dc27a919 100644
--- a/front/changeLogCore.php
+++ b/front/changeLogCore.php
@@ -14,10 +14,10 @@
 
   <div class="row">
     <div class="col-xs-12">
-      <div class="box">
+      <div >
       
         <!-- Filter Bar -->      
-        <div class="box-header" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
+        <div class="changeLogFilter" >
           <select id="filterChangedBy" class="form-control" style="width:200px;">
             <option value=""><?= lang('device_history_col_source'); ?> - All</option>
           </select>
diff --git a/front/css/app.css b/front/css/app.css
index 6f3a2d0c..34689e95 100755
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -248,7 +248,7 @@ a[target="_blank"] {
 .main-footer {
     padding: 5px;
     z-index: 10000;
-    position: inherit;
+    /* position: inherit; */
 }
 
 .header-server-time
@@ -2687,7 +2687,7 @@ table.dataTable tbody > tr.selected
 
 .change-log .helpIcon{
     font-size: x-small;
-    top: 65px; 
+    top: 0px; 
 }
 
 #panHistory .change-log .helpIcon{
@@ -2706,10 +2706,23 @@ table.dataTable tbody > tr.selected
     padding:0px;
 }
 
-#panHistory .change-log-skeleton-class 
+.changeLogFilter{
+    display:flex; 
+    gap:10px; 
+    flex-wrap:wrap; 
+    align-items:center;
+    padding:5px;
+}
+
+#changeHistoryPage .box
 {
-    margin-left: 0px;
-    width: calc(100% - 40px);
+    margin-bottom:0px
+}
+
+#changeHistoryPage .change-log-skeleton-class
+{
+    padding: 15px;
+    width: auto;
 }
 
 /* -----------------------------------------------------------------------------
@@ -2755,7 +2768,7 @@ table.dataTable tbody > tr.selected
 
 /* Page-level overlay base */
 #settings-skeleton, #devices-skeleton, #device-details-skeleton,
-#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-events, #change-log-skeleton
+#events-skeleton, #presence-skeleton, #report-skeleton, #skel-app-events, #change-log-skeleton,
 #notifications-skeleton, #workflows-skeleton, #plugins-skeleton, .skel-tab-pane {
     position: absolute;
     top: 0;
@@ -2770,7 +2783,7 @@ table.dataTable tbody > tr.selected
 #settings-skeleton       { margin: 15px; min-height: 500px; }
 #devices-skeleton        { margin: 15px; top: 50px; min-height: 500px; }
 #skel-app-events         { margin: 15px; top: 50px; min-height: 500px; z-index: inherit;}
-#device-details-skeleton { margin: 15px; top: 42px; }
+#device-details-skeleton { margin: 15px; top: 42px; padding: 10px }
 #events-skeleton         { margin: 15px; top: 50px; min-height: 500px; }
 #presence-skeleton       { margin: 15px; top: 50px; min-height: 500px; }
 #report-skeleton         { margin: 15px; top: 50px; min-height: 400px; }
@@ -2911,5 +2924,8 @@ table.dataTable tbody > tr.selected
 .skel-info-tab          { padding: 15px; min-height: 360px; }
 .skel-info-tab          { margin: -10px;}
 
+/* ----- ChangeLog tabs -------------------------------------------------- */
+#panHistory .change-log-skeleton-class { width: calc(100% - 30px); padding: 5px; top: auto;}
+
 /* ===== /Loading Skeleton ===== */
 
diff --git a/front/deviceDetails.php b/front/deviceDetails.php
index 5e0b76e4..e340fb7b 100755
--- a/front/deviceDetails.php
+++ b/front/deviceDetails.php
@@ -599,9 +599,16 @@ window.onload = function() {
 
 // -----------------------------------------------------------------------------
 function hideDeviceDetailsSkeleton() {
-  $('#device-details-skeleton').fadeOut(0, function() { $(this).remove(); });
+  $('#device-details-skeleton').fadeOut(0, function() { $(this).hide(); });
 }
 
+// -----------------------------------------------------------------------------
+function showDeviceDetailsSkeleton() {
+  var $skel = $('#device-details-skeleton');
+  $skel.stop(true, true).fadeIn(10);
+}
+
+
 // Fallback: remove main skeleton and all tab pane skeletons if init stalls
 setTimeout(function() {
   hideDeviceDetailsSkeleton();
diff --git a/front/js/common.js b/front/js/common.js
index 765d3438..bcad76e6 100755
--- a/front/js/common.js
+++ b/front/js/common.js
@@ -1041,11 +1041,6 @@ function showSpinner(stringKey = "Loading", target = null) {
   });
 }
 
-function hideSpinner() {
-  $("#loadingSpinner")
-    .removeClass("visible")
-    .fadeOut(animationTime);
-}
 
 function hideSpinner() {
   clearTimeout(spinnerTimeout);
@@ -1053,7 +1048,7 @@ function hideSpinner() {
 
   if (!spinner.length) return;
 
-  const target = $(".spinnerTarget").first();
+  const target = $(".spinnerTarget").last();
 
   if (target.length) {
     // Lock position to target
diff --git a/front/php/templates/skel_change_log.php b/front/php/templates/skel_change_log.php
index c51c0b64..ec5165f9 100644
--- a/front/php/templates/skel_change_log.php
+++ b/front/php/templates/skel_change_log.php
@@ -1,6 +1,6 @@
 <!-- Change log Table Skeleton === -->
-<div id="change-log-skeleton" class=" change-log-skeleton-class">
-    <section class="box">
+<div id="change-log-skeleton" class="change-log-skeleton-class">
+    <section>
         <div class="skel-table-box ">
         <div class="skel-table-header-row">
             <?php for ($j = 0; $j < 5; $j++): ?>