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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user