v0.8.14-fix_css

web/app.js

@@ -149,6 +149,24 @@ function updateTemporaryThermostatCountdowns() {
 }
 const haSensorLabel = entity => app.sensorAliases?.[entity] || app.settings?.home_assistant?.sensor_aliases?.[entity] || entity;
 
+function syncTopbarHeight() {
+  const topbar = $('.topbar');
+  if (!topbar) return;
+  document.documentElement.style.setProperty('--topbar-height', `${Math.ceil(topbar.getBoundingClientRect().height)}px`);
+}
+
+function observeTopbarHeight() {
+  const topbar = $('.topbar');
+  if (!topbar) return;
+  syncTopbarHeight();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(syncTopbarHeight);
+    observer.observe(topbar);
+  } else {
+    window.addEventListener('resize', syncTopbarHeight);
+  }
+}
+
 function updateConnectionIndicator(status) {
   app.connectionStatus = status || 'connecting';
   const node = $('#connectionLabel');
@@ -3140,6 +3158,7 @@ window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', ()
 if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(()=>{}));
 
 async function startApplication() {
+  observeTopbarHeight();
   applyTheme();
   await loadLanguages();
   applyTranslations();

web/styles.css

@@ -257,7 +257,7 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
 .menu-list button:last-child { border-bottom: 0; }
 .auth-dialog { width: min(420px, calc(100% - 30px)); }
 @media (min-width: 900px) {
-  .bottom-nav { top: 92px; right: auto; bottom: auto; left: max(16px, calc((100vw - 1380px)/2)); grid-template-columns: 1fr; width: 90px; border: 1px solid var(--line); border-radius: 22px; padding: 9px; background: var(--surface); }
+  .bottom-nav { top: calc(var(--topbar-height, 72px) + 20px); right: auto; bottom: auto; left: max(16px, calc((100vw - 1380px)/2)); grid-template-columns: 1fr; width: 90px; border: 1px solid var(--line); border-radius: 22px; padding: 9px; background: var(--surface); }
   .bottom-nav button { padding: 10px 4px; }
   main { padding-left: 122px; padding-bottom: 50px; }
 }