3.5.5

Update desktop profile hover button
Recalibrated vehicle ventilation calcs

assets/js/components/ConfigPanel.js

@@ -55,6 +55,7 @@ export function ConfigPanel({
 }) {
   const profileScrollRef = useRef(null);
   const profileWrapRef   = useRef(null);
+  const dropdownRef      = useRef(null);
 
   const { mainConfigKey, mainLabel } = deriveProfileMain(activeProfile, outdoorsVariant);
 
@@ -77,6 +78,34 @@ export function ConfigPanel({
     return () => document.removeEventListener('keydown', onKey);
   }, [open, onClose]);
 
+  // From tablet up the panel drops *out of* the active-profile-row rather
+  // than sliding up from the floating button (which is mobile-only), so it
+  // has to be anchored to that row's live bottom edge — it's sticky on
+  // desktop and scrolls away on tablet, hence remeasuring on scroll/resize.
+  // Mobile (<=640px) ignores the var entirely and keeps the bottom sheet.
+  useEffect(() => {
+    const el = dropdownRef.current;
+    if (!el) return;
+    const measure = () => {
+      const row = document.querySelector('.active-profile-row');
+      const top = row ? Math.max(0, row.getBoundingClientRect().bottom) : 0;
+      el.style.setProperty('--profile-anchor-top', `${Math.round(top)}px`);
+      // Not enough room below the row for the panel's content? Fall back to
+      // the mobile bottom-sheet layout, which gets the full viewport height.
+      const body    = el.querySelector('.profile-dropdown-body');
+      const content = body ? body.scrollHeight : 0;
+      el.classList.toggle('is-bottom-sheet', content > window.innerHeight - top - 16);
+    };
+    measure();
+    if (!open) return;
+    window.addEventListener('scroll', measure, true);
+    window.addEventListener('resize', measure);
+    return () => {
+      window.removeEventListener('scroll', measure, true);
+      window.removeEventListener('resize', measure);
+    };
+  }, [open, activeTab, activeProfile, outdoorsVariant]);
+
   // Drag-to-scroll + fade edges for the horizontal profile card row.
   useEffect(() => {
     const el   = profileScrollRef.current;
@@ -226,7 +255,7 @@ export function ConfigPanel({
   return html`
     <${Fragment}>
       <div class=${`profile-dropdown-overlay${open ? ' is-open' : ''}`} onClick=${onClose}></div>
-      <div class=${`profile-dropdown${open ? ' is-open' : ''}`} role="dialog" aria-modal="true" aria-label="Profile and configuration" aria-hidden=${!open}>
+      <div ref=${dropdownRef} class=${`profile-dropdown${open ? ' is-open' : ''}`} role="dialog" aria-modal="true" aria-label="Profile and configuration" aria-hidden=${!open}>
         <button class="profile-dropdown-close" aria-label="Close" onClick=${onClose}>×</button>
         <div class="profile-dropdown-body">