fix(docs): resolve iOS Safari discovery popover stacking issue

johnleider · johnleider · commit 6f7040e1b4a6 · 2026-01-27T21:40:48.000-06:00
Add #discovery-layer div at start of body for discovery component teleport
target. Move DiscoveryHighlight and DiscoveryContent teleports to this layer.
Revert DocsSearch to inline rendering (matches Settings/Ask AI pattern).

iOS Safari renders fixed elements in DOM order even when z-index should take
precedence. By placing discovery layer first in DOM, components render on top.
diff --git a/apps/docs/index.html b/apps/docs/index.html
@@ -8,6 +8,7 @@
     <link rel="icon" type="image/png" href="/0.png">
   </head>
   <body>
+    <div id="discovery-layer"></div>
     <div id="app"></div>
     <script type="module" src="./src/main.ts"></script>
   </body>
diff --git a/apps/docs/src/components/discovery/DiscoveryContent.vue b/apps/docs/src/components/discovery/DiscoveryContent.vue
@@ -153,7 +153,7 @@
 </script>
 
 <template>
-  <Teleport v-if="isReady" to="body">
+  <Teleport v-if="isReady" to="#discovery-layer">
     <div
       ref="content"
       v-bind="attrs"
diff --git a/apps/docs/src/components/discovery/DiscoveryHighlight.vue b/apps/docs/src/components/discovery/DiscoveryHighlight.vue
@@ -171,7 +171,7 @@
 <template>
   <slot />
 
-  <Teleport to="body">
+  <Teleport to="#discovery-layer">
     <Transition name="discovery-highlight">
       <div v-if="isVisible" class="fixed inset-0 pointer-events-none" style="z-index: 9998">
         <!-- Click-blocking layer for backdrop (when blocking is enabled) -->
diff --git a/apps/docs/src/components/docs/DocsSearch.vue b/apps/docs/src/components/docs/DocsSearch.vue
