fix(03): replace template x-data with tbody x-data for table rendering

<template x-data> inside <tbody> is inert — browsers don't render its
children. Replace with per-member <tbody x-data> (multiple tbody is
valid HTML). Also replace x-collapse on <tr> with x-transition since
table rows don't support max-height/overflow-hidden.

UAT: all 7 tests passed via Playwright automation.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
2026-02-13 15:02:16 +08:00
parent 596e43bed3
commit 3e9bf153dc
3 changed files with 65 additions and 6 deletions

View File

@@ -191,9 +191,8 @@
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
@forelse ($members as $member)
<template x-data="{
<tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800" x-data="{
noteFormOpen: false,
noteContent: '',
isSubmitting: false,
@@ -364,7 +363,13 @@
</td>
</tr>
<!-- Expansion panel row -->
<tr x-show="historyOpen" x-collapse
<tr x-show="historyOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
:id="'notes-panel-{{ $member->id }}'"
class="bg-gray-50 dark:bg-gray-900">
<td colspan="8" class="px-6 py-4">
@@ -417,15 +422,16 @@
</div>
</td>
</tr>
</template>
</tbody>
@empty
<tbody class="bg-white dark:bg-gray-800">
<tr>
<td colspan="8" class="px-4 py-4 text-sm text-gray-500 dark:text-gray-400">
找不到會員。
</td>
</tr>
</tbody>
@endforelse
</tbody>
</table>
</div>