fix(web): avoid dropdown id collisions with ZFS Master (#1958)

## Summary
- add a small compatibility shim that rewrites dropdown-related ids and
ARIA references away from the legacy `dropdown-` segment
- enable the shim during unified app mounting so dynamically added menu
nodes are sanitized too
- add a regression test covering the id and ARIA rewrites

## Root Cause
Some legacy Unraid plugins target DOM ids containing `dropdown-`. Our
Reka dropdown markup uses ids like `reka-dropdown-menu-*`, which lets
those plugins accidentally hide the Connect menu immediately after it
renders.

## Testing
- pnpm test __test__/components/Wrapper/mount-engine.test.ts

Author: elibosley

web/__test__/components/Wrapper/mount-engine.test.ts

@@ -248,6 +248,28 @@ describe('mount-engine', () => {
       expect(lastUAppPortal).toBe('#unraid-api-modals-virtual');
     });
 
+    it('should sanitize conflicting dropdown ids that legacy plugins target', async () => {
+      await mountUnifiedApp();
+
+      const trigger = document.createElement('button');
+      trigger.setAttribute('id', 'reka-dropdown-menu-trigger-1');
+      document.body.appendChild(trigger);
+
+      const content = document.createElement('div');
+      content.setAttribute('id', 'reka-dropdown-menu-content-1');
+      content.setAttribute('aria-labelledby', 'reka-dropdown-menu-trigger-1');
+      document.body.appendChild(content);
+
+      trigger.setAttribute('aria-controls', 'reka-dropdown-menu-content-1');
+
+      await vi.waitFor(() => {
+        expect(trigger.getAttribute('id')).toBe('reka-menu-trigger-1');
+        expect(trigger.getAttribute('aria-controls')).toBe('reka-menu-content-1');
+        expect(content.getAttribute('id')).toBe('reka-menu-content-1');
+        expect(content.getAttribute('aria-labelledby')).toBe('reka-menu-trigger-1');
+      });
+    });
+
     it('should decorate the parent container when requested', async () => {
       const container = document.createElement('div');
       container.id = 'container';

web/src/components/Wrapper/mount-engine.ts

@@ -11,6 +11,7 @@ import { createI18nInstance, ensureLocale, getWindowLocale } from '~/helpers/i18
 
 // Import Pinia for use in Vue apps
 import { globalPinia } from '~/store/globalPinia';
+import { enableDropdownIdCompatibility } from '~/utils/dropdownIdCompatibility';
 import { ensureUnapiScope, ensureUnapiScopeForSelectors, observeUnapiScope } from '~/utils/unapiScope';
 
 // Ensure Apollo client is singleton
@@ -128,6 +129,8 @@ function parsePropsFromElement(element: Element): Record<string, unknown> {
 
 // Create and mount unified app with shared context
 export async function mountUnifiedApp() {
+  enableDropdownIdCompatibility();
+
   // Create a minimal app just for context sharing
   const app = createApp({
     name: 'UnifiedContextApp',

web/src/utils/dropdownIdCompatibility.ts

@@ -0,0 +1,80 @@
+const CONFLICTING_ID_SEGMENT = 'dropdown-';
+const SAFE_ID_SEGMENT = 'menu-';
+
+const ATTRIBUTE_NAMES = ['id', 'aria-controls', 'aria-labelledby'] as const;
+const SELECTOR = ATTRIBUTE_NAMES.map((attribute) => `[${attribute}*="${CONFLICTING_ID_SEGMENT}"]`).join(
+  ', '
+);
+
+let compatibilityObserver: MutationObserver | null = null;
+
+function normalizeValue(value: string): string {
+  return value.replace(/dropdown-menu-/g, SAFE_ID_SEGMENT).replace(/dropdown-/g, SAFE_ID_SEGMENT);
+}
+
+function sanitizeAttribute(element: Element, attributeName: (typeof ATTRIBUTE_NAMES)[number]): void {
+  const value = element.getAttribute(attributeName);
+  if (!value || !value.includes(CONFLICTING_ID_SEGMENT)) {
+    return;
+  }
+
+  element.setAttribute(attributeName, normalizeValue(value));
+}
+
+function sanitizeElement(element: Element): void {
+  ATTRIBUTE_NAMES.forEach((attributeName) => {
+    sanitizeAttribute(element, attributeName);
+  });
+}
+
+function sanitizeTree(root: ParentNode): void {
+  root.querySelectorAll(SELECTOR).forEach((element) => {
+    sanitizeElement(element);
+  });
+}
+
+export function enableDropdownIdCompatibility(doc: Document = document): void {
+  if (compatibilityObserver) {
+    sanitizeTree(doc);
+    return;
+  }
+
+  sanitizeTree(doc);
+
+  const observerRoot = doc.body ?? doc.documentElement;
+  if (!observerRoot) {
+    return;
+  }
+
+  compatibilityObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'attributes' && mutation.target instanceof Element) {
+        const attributeName = mutation.attributeName;
+        if (
+          attributeName === 'id' ||
+          attributeName === 'aria-controls' ||
+          attributeName === 'aria-labelledby'
+        ) {
+          sanitizeAttribute(mutation.target, attributeName);
+        }
+        return;
+      }
+
+      mutation.addedNodes.forEach((node) => {
+        if (!(node instanceof Element)) {
+          return;
+        }
+
+        sanitizeElement(node);
+        sanitizeTree(node);
+      });
+    });
+  });
+
+  compatibilityObserver.observe(observerRoot, {
+    attributes: true,
+    attributeFilter: [...ATTRIBUTE_NAMES],
+    childList: true,
+    subtree: true,
+  });
+}