Index: sources/gui/qml/components/Footer.qml
===================================================================
diff -u -r4afc91856c00e01dfb5d84bc54d2d92faefec0db -r2ef03b2ce51b4dc507f66e9671953a8e0824bde9
--- sources/gui/qml/components/Footer.qml	(.../Footer.qml)	(revision 4afc91856c00e01dfb5d84bc54d2d92faefec0db)
+++ sources/gui/qml/components/Footer.qml	(.../Footer.qml)	(revision 2ef03b2ce51b4dc507f66e9671953a8e0824bde9)
@@ -1,15 +1,15 @@
 /*!
  *
- * Copyright (c) 2019-2020 Diality Inc. - All Rights Reserved.
+ * Copyright (c) 2021-2024 Diality Inc. - All Rights Reserved.
  * \copyright
  * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
  * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
  *
- * \file    BackButton.qml
+ * \file    Footer.qml
  * \author  (last)      Behrouz NematiPour
- * \date    (last)      17-Mar-2021
+ * \date    (last)      06-Oct-2022
  * \author  (original)  Behrouz NematiPour
- * \date    (original)  17-Mar-2021
+ * \date    (original)  18-Mar-2021
  *
  */
 
@@ -21,7 +21,11 @@
 import "qrc:/globals"
 
 /*!
- * \brief   Denali project Footer section which gives all the children same width with same spacing, aligned in center
+ * \brief   Denali project Footer section which gives all the children same width with same spacing, aligned in center.
+ * \details It's been created because the row layout is always keeping it's children aligned at left and not at center.
+ *          This mainly being used to keep buttons on a screen alinged with the same width and space between them and horisontalley centered
+ *          on the bottom of the screen (footer),
+ *          and with enough bottom marging to give room to the alarm bar.
  */
 Row { id: _root
     property int childrenWidth  : _root.width / (childrenCount * 2 + 1 )
@@ -31,27 +35,38 @@
         property int spacing    : 0
     }
 
-    // this code will run once and will not run for each child,
-    // that's becuase the available property to add children is the children property
-    // and that property can only change by assigning a list to it.
-    // so it happens once with no performance issue of multiple redundant call.
-    onVisibleChanged: {
+    function update() {
         // check there is a child
         let count = childrenCount
         if ( ! count ) return
 
-
         let width   = childrenWidth
-        let spacing = (_root.width - (width * count)) / (count + 1)
 
+        let visibleCount = 0
         for (let i = 0; i < count; i++) {
-            if (children[i].width !== width) {
-                children[i].width   = width
+            //DEBUG: console.debug(children[i].text.text)
+            if ( children[i].visible ) {
+
+                visibleCount += 1
+                if (children[i].width !== width) {
+                    children[i].width   = width
+                }
             }
+            else {
+                children[i].width   = 0
+            }
         }
+        let spacing = (_root.width - (width * visibleCount)) / (visibleCount + 1)
+        //DEBUG: console.debug( " ~~~~~~~~~~ ", count, visibleCount, spacing)
         _private.spacing = spacing
     }
 
+    // this code will run once and will not run for each child,
+    // that's becuase the available property to add children is the children property
+    // and that property can only change by assigning a list to it.
+    // so it happens once with no performance issue of multiple redundant call.
+    onVisibleChanged    : update()
+
     spacing             : _private.spacing
     rightPadding        : _private.spacing
     leftPadding         : _private.spacing