fix: move face detail nav arrows outside modal overlay

- Moved .ms-fs-nav-arrow buttons outside .ms-modal-overlay div
- Updated z-index to dynamic faceDetailZIndex + 100
- Fixes stacking context issue where arrows were unclickable
- Arrows now render as siblings of overlay with proper z-index
This commit is contained in:
2026-10-30 18:59:19 +08:00
parent 8382590c58
commit efe5bcee8a

View File

@@ -295,14 +295,14 @@
<!-- Assign modal --> <!-- Assign modal -->
<!-- Face detail modal --> <!-- Face detail modal -->
<div v-if="faceDetailModal.show" class="ms-modal-overlay show" :style="{ zIndex: faceDetailZIndex }" @click.self="faceDetailModal.show = false"> <!-- Side navigation arrows - outside overlay for proper z-index stacking -->
<!-- Side navigation arrows --> <button v-if="faceDetailModal.show && canFaceDetailPrev" class="ms-fs-nav-arrow ms-fs-nav-prev" @click="goFaceDetailPrev" title="Previous FS (←)" :style="{ zIndex: faceDetailZIndex + 100 }">
<button v-if="canFaceDetailPrev" class="ms-fs-nav-arrow ms-fs-nav-prev" @click="goFaceDetailPrev" title="Previous FS (←)">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button> </button>
<button v-if="canFaceDetailNext" class="ms-fs-nav-arrow ms-fs-nav-next" @click="goFaceDetailNext" title="Next FS (→)"> <button v-if="faceDetailModal.show && canFaceDetailNext" class="ms-fs-nav-arrow ms-fs-nav-next" @click="goFaceDetailNext" title="Next FS (→)" :style="{ zIndex: faceDetailZIndex + 100 }">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button> </button>
<div v-if="faceDetailModal.show" class="ms-modal-overlay show" :style="{ zIndex: faceDetailZIndex }" @click.self="faceDetailModal.show = false">
<div class="ms-modal ms-modal-face-detail"> <div class="ms-modal ms-modal-face-detail">
<button class="ms-fm-icon-btn close-btn" @click="faceDetailModal.show = false" title="Close (Esc)">×</button> <button class="ms-fm-icon-btn close-btn" @click="faceDetailModal.show = false" title="Close (Esc)">×</button>
<button class="ms-fm-icon-btn fs-delete-btn" @click="deleteCurrentFace" title="Delete this FS"> <button class="ms-fm-icon-btn fs-delete-btn" @click="deleteCurrentFace" title="Delete this FS">