From d2d69ecfa19c10a51c0c388043cd195ed6bd64f0 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 13:36:24 +0200
Subject: [PATCH] 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>
---
 frontend/src/pages/inbounds/InboundList.vue | 78 +++++++++++----------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/frontend/src/pages/inbounds/InboundList.vue b/frontend/src/pages/inbounds/InboundList.vue
index 020a9aaa..0f0468c2 100644
--- a/frontend/src/pages/inbounds/InboundList.vue
+++ b/frontend/src/pages/inbounds/InboundList.vue
@@ -397,14 +397,16 @@ function showQrCodeMenu(dbInbound) {
             <a-popover>
               <template #content>
                 <table cellpadding="2">
-                  <tr>
-                    <td>↑ {{ SizeFormatter.sizeFormat(record.up) }}</td>
-                    <td>↓ {{ SizeFormatter.sizeFormat(record.down) }}</td>
-                  </tr>
-                  <tr v-if="record.total > 0 && record.up + record.down < record.total">
-                    <td>Remaining</td>
-                    <td>{{ SizeFormatter.sizeFormat(record.total - record.up - record.down) }}</td>
-                  </tr>
+                  <tbody>
+                    <tr>
+                      <td>↑ {{ SizeFormatter.sizeFormat(record.up) }}</td>
+                      <td>↓ {{ SizeFormatter.sizeFormat(record.down) }}</td>
+                    </tr>
+                    <tr v-if="record.total > 0 && record.up + record.down < record.total">
+                      <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,35 +441,37 @@ function showQrCodeMenu(dbInbound) {
             <a-popover placement="bottomRight" trigger="click">
               <template #content>
                 <table cellpadding="2">
-                  <tr>
-                    <td>Protocol</td>
-                    <td><a-tag color="purple">{{ record.protocol }}</a-tag></td>
-                  </tr>
-                  <tr>
-                    <td>Port</td>
-                    <td><a-tag>{{ record.port }}</a-tag></td>
-                  </tr>
-                  <tr v-if="clientCount[record.id]">
-                    <td>Clients</td>
-                    <td><a-tag color="blue">{{ clientCount[record.id].clients }}</a-tag></td>
-                  </tr>
-                  <tr>
-                    <td>Traffic</td>
-                    <td>
-                      <a-tag>
-                        {{ SizeFormatter.sizeFormat(record.up + record.down) }} /
-                        <template v-if="record.total > 0">{{ SizeFormatter.sizeFormat(record.total) }}</template>
-                        <template v-else>∞</template>
-                      </a-tag>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>Expiry</td>
-                    <td>
-                      <a-tag v-if="record.expiryTime > 0">{{ IntlUtil.formatRelativeTime(record.expiryTime) }}</a-tag>
-                      <a-tag v-else color="purple">∞</a-tag>
-                    </td>
-                  </tr>
+                  <tbody>
+                    <tr>
+                      <td>Protocol</td>
+                      <td><a-tag color="purple">{{ record.protocol }}</a-tag></td>
+                    </tr>
+                    <tr>
+                      <td>Port</td>
+                      <td><a-tag>{{ record.port }}</a-tag></td>
+                    </tr>
+                    <tr v-if="clientCount[record.id]">
+                      <td>Clients</td>
+                      <td><a-tag color="blue">{{ clientCount[record.id].clients }}</a-tag></td>
+                    </tr>
+                    <tr>
+                      <td>Traffic</td>
+                      <td>
+                        <a-tag>
+                          {{ SizeFormatter.sizeFormat(record.up + record.down) }} /
+                          <template v-if="record.total > 0">{{ SizeFormatter.sizeFormat(record.total) }}</template>
+                          <template v-else>∞</template>
+                        </a-tag>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>Expiry</td>
+                      <td>
+                        <a-tag v-if="record.expiryTime > 0">{{ IntlUtil.formatRelativeTime(record.expiryTime) }}</a-tag>
+                        <a-tag v-else color="purple">∞</a-tag>
+                      </td>
+                    </tr>
+                  </tbody>
                 </table>
               </template>
               <InfoCircleOutlined class="row-info-trigger" />