From be8f22b65c044a472405247b4d065d013d0c8668 Mon Sep 17 00:00:00 2001
From: Antony Rizzitelli <rizzitelli.antony@pm.me>
Date: Tue, 10 Nov 2026 04:10:32 +0000
Subject: [PATCH] perf(query): render each result row's data browser link as a
 ULink

A browsable result rendered one UButton per row for its Open in data browser link. Each UButton builds its own variant classes and wraps a ULink, a ULinkBase and a UIcon, so a 1,000-row result spent most of its render mounting them. A raw ULink with the same classes and icon keeps the link, its label, its in-app navigation and its look.
---
 frontend-vue/app/components/QueryResultPanel.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend-vue/app/components/QueryResultPanel.vue b/frontend-vue/app/components/QueryResultPanel.vue
index 08ff7cd..e05962a 100644
--- a/frontend-vue/app/components/QueryResultPanel.vue
+++ b/frontend-vue/app/components/QueryResultPanel.vue
@@ -497,17 +497,19 @@ const suggestion = computed(() => {
 								{{ renderCell(row[column]) }}
 							</td>
 							<td v-if="browsable" class="px-1">
-								<UButton
+								<ULink
 									v-if="rowLink(row)"
 									:to="rowLink(row) ?? undefined"
-									icon="i-ph-arrow-square-out"
-									color="neutral"
-									variant="ghost"
-									size="xs"
-									class="opacity-0 focus-visible:opacity-100 group-hover/result:opacity-100"
+									raw
+									class="text-default hover:bg-elevated hover:text-highlighted outline-inverted/25 focus-visible:outline-3 inline-flex size-6 items-center justify-center rounded-[6px] text-xs opacity-0 transition focus-visible:opacity-100 active:scale-[0.98] group-hover/result:opacity-100"
 									:aria-label="t('dms_database.query.result.open_row')"
 									:title="t('dms_database.query.result.open_row')"
-								/>
+								>
+									<UIcon
+										name="i-ph-arrow-square-out"
+										class="size-3.5 shrink-0"
+									/>
+								</ULink>
 							</td>
 						</tr>
 					</tbody>