lfg2025/archy
1
0
Fork 0
Code Issues 16 Pull Requests 2 Actions Packages Projects Releases 44 Wiki Activity

fix: teleport mobile close button to body to escape CSS transform

Browse Source 
The mobile close button uses position: fixed, which breaks inside
a CSS transform containing block. Wrapping in <Teleport to="body">
ensures correct fixed positioning relative to the viewport.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-03-05 08:56:23 +00:00
parent cb3fea5303
commit 255b52eb6d
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
neode-ui/src/views/Chat.vue
View File

@ -54,19 +54,21 @@
</div> </div>
</div> </div>
<!-- Mobile close bar: sits above the tab bar, below the AIUI content --> <!-- Mobile close bar (teleported to escape CSS transform containing block) -->
<div class="md:hidden mobile-back-btn flex items-center justify-center"> <Teleport to="body">
<button <div class="md:hidden mobile-back-btn flex items-center justify-center">
class="w-full glass-button px-6 py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 text-sm" <button
style="background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);" class="w-full glass-button px-6 py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 text-sm"
@click="closeChat" style="background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);"
> @click="closeChat"
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> >
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
</svg> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
Close Chat </svg>
</button> Close Chat
</div> </button>
</div>
</Teleport>
</div> </div>
</template> </template>