refactor: centralize UI config and inject CSS variables dynamically

src/components/Footer.vue

@@ -14,7 +14,8 @@ const version = __APP_VERSION__;
 <style scoped>
 .app-footer {
   width: 100%;
-  padding: 0.5rem;
+  height: var(--footer-height);
+  padding: 0 0.5rem;
   /* Background handled by glass-panel */
   border-left: none;
   border-right: none;
@@ -24,12 +25,9 @@ const version = __APP_VERSION__;
   align-items: center;
   justify-content: center;
   z-index: 10;
-  /* Remove fixed height to allow content to dictate size */
-  /* height: 30px; */
   position: fixed;
   bottom: 0;
   left: 0;
-  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
 
 @media (min-width: 768px) {