added version number in the footer

ui/src/scss/_layout.scss

@@ -1,35 +1,3 @@
-// footer
-// -------------------------------------------------------------------
-
-.app-footer {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: right;
-    column-gap: var(--smSpacing);
-    font-size: var(--smFontSize);
-    line-height: var(--smLineHeight);
-    color: var(--txtHintColor);
-    .footer-item {
-        display: inline-flex;
-        align-items: center;
-        column-gap: 5px;
-        img {
-            width: 16px;
-        }
-    }
-    a {
-        color: inherit;
-        text-decoration: none;
-        transition: color var(--baseAnimationSpeed);
-        &:focus-visible,
-        &:hover,
-        &:active {
-            color: var(--txtPrimaryColor);
-        }
-    }
-}
-
 // sidebar
 // -------------------------------------------------------------------
 
@@ -319,13 +287,54 @@
     }
 }
 
-.page-wrapper {
+.page-content {
     position: relative;
     display: block;
     width: 100%;
     flex-grow: 1;
     padding: calc(var(--baseSpacing) - 5px) var(--baseSpacing);
+}
+
+.page-footer {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+    justify-content: right;
+    text-align: right;
+    padding: 0px var(--baseSpacing) 15px;
+    color: var(--txtDisabledColor);
+    font-size: var(--xsFontSize);
+    line-height: var(--smLineHeight);
+    i {
+        font-size: 1.2em;
+    }
+    a {
+        color: inherit;
+        text-decoration: none;
+        transition: color var(--baseAnimationSpeed);
+        &:focus-visible,
+        &:hover,
+        &:active {
+            color: var(--txtPrimaryColor);
+        }
+    }
+}
+
+.page-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    width: 100%;
     overflow-x: hidden;
     overflow-y: auto; /* fallback */
     overflow-y: overlay;
+    &.full-page {
+        background: var(--baseColor);
+    }
+    &.center-content {
+        .page-content {
+            display: flex;
+            align-items: center;
+        }
+    }
 }

ui/src/scss/_tooltip.scss

@@ -19,13 +19,19 @@
     transition: opacity var(--baseAnimationSpeed),
                 visibility var(--baseAnimationSpeed),
                 transform var(--baseAnimationSpeed);
-    transform: scale(0.94);
+    transform: translateY(2px);
     white-space: pre-line;
     @include hide();
-    &.active {
-        transform: scale(1);
-        @include show();
+
+    // positions
+    &.left {
+        transform: translateX(2px);
     }
+    &.right  {
+        transform: translateX(-2px);
+    }
+
+    // styles
     &.code {
         font-family: monospace;
         white-space: pre-wrap;
@@ -33,4 +39,10 @@
         min-width: 150px;
         max-width: 340px;
     }
+
+    // states
+    &.active {
+        transform: scale(1);
+        @include show();
+    }
 }