fix(inbounds): wrap popover-table rows in <tbody>

Vue's template compiler warned that <tr> can't be a direct child of
<table> per the HTML spec; the browser silently inserts a <tbody>
wrapper but Vue's SSR/hydration path doesn't, which can cause
hydration mismatches. Add explicit <tbody> in both popover tables
(traffic + mobile-info).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MHSanaei 2026-05-08 13:36:24 +02:00
parent f205cce044
commit d2d69ecfa1
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A

View file

@ -397,6 +397,7 @@ function showQrCodeMenu(dbInbound) {
<a-popover>
<template #content>
<table cellpadding="2">
<tbody>
<tr>
<td> {{ SizeFormatter.sizeFormat(record.up) }}</td>
<td> {{ SizeFormatter.sizeFormat(record.down) }}</td>
@ -405,6 +406,7 @@ function showQrCodeMenu(dbInbound) {
<td>Remaining</td>
<td>{{ SizeFormatter.sizeFormat(record.total - record.up - record.down) }}</td>
</tr>
</tbody>
</table>
</template>
<a-tag :color="ColorUtils.usageColor(record.up + record.down, trafficDiff, record.total)">
@ -439,6 +441,7 @@ function showQrCodeMenu(dbInbound) {
<a-popover placement="bottomRight" trigger="click">
<template #content>
<table cellpadding="2">
<tbody>
<tr>
<td>Protocol</td>
<td><a-tag color="purple">{{ record.protocol }}</a-tag></td>
@ -468,6 +471,7 @@ function showQrCodeMenu(dbInbound) {
<a-tag v-else color="purple"></a-tag>
</td>
</tr>
</tbody>
</table>
</template>
<InfoCircleOutlined class="row-info-trigger" />