From f37bfb80d26768ae53869d31753d1f1a946702e4 Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Thu, 22 Jan 2026 17:22:24 -0800
Subject: [PATCH] fix: prevent text selection on interactive Asset Browser
 elements

Add select-none to cards, nav items, badges, headers, and labels

Improves touch/mobile UX by preventing accidental selection

Amp-Thread-ID: https://ampcode.com/threads/T-019be83a-cf2b-7079-8ca9-45fcda1d5fff
Co-authored-by: Amp <amp@ampcode.com>
---
 src/components/widget/layout/BaseModalLayout.vue           | 7 +++++--
 src/components/widget/nav/NavItem.vue                      | 2 +-
 src/components/widget/panel/PanelHeader.vue                | 2 +-
 src/platform/assets/components/AssetBadgeGroup.vue         | 4 +++-
 src/platform/assets/components/AssetCard.vue               | 2 +-
 src/platform/assets/components/AssetGrid.vue               | 2 +-
 .../assets/components/modelInfo/ModelInfoField.vue         | 2 +-
 .../assets/components/modelInfo/ModelInfoPanel.vue         | 6 +++---
 8 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index 148ea3ccd..1683115b4 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -69,7 +69,7 @@
           <slot name="contentFilter" />
           <h2
             v-if="!hasLeftPanel"
-            class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
+            class="text-xxl m-0 select-none px-6 pt-2 pb-6 capitalize"
           >
             {{ contentTitle }}
           </h2>
@@ -94,7 +94,10 @@
             data-component-id="RightPanelHeader"
             class="flex h-18 shrink-0 items-center gap-2 px-6"
           >
-            <h2 v-if="rightPanelTitle" class="flex-1 text-base font-semibold">
+            <h2
+              v-if="rightPanelTitle"
+              class="flex-1 select-none text-base font-semibold"
+            >
               {{ rightPanelTitle }}
             </h2>
             <div v-else class="flex-1">
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index eb20b9852..f7b8bbcf1 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -5,7 +5,7 @@
       disabled: !isOverflowing,
       pt: { text: { class: 'whitespace-nowrap' } }
     }"
-    class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
diff --git a/src/components/widget/panel/PanelHeader.vue b/src/components/widget/panel/PanelHeader.vue
index cdcc4eb20..b95fb9a58 100644
--- a/src/components/widget/panel/PanelHeader.vue
+++ b/src/components/widget/panel/PanelHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="flex h-16 items-center justify-between px-6">
+  <header class="flex h-16 items-center justify-between px-6 select-none">
     <div class="flex items-center gap-2 pl-1">
       <slot name="icon">
         <i class="text-neutral icon-[lucide--puzzle] text-base" />
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 5c85713e4..46c39e917 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1">
+  <div
+    class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1 select-none"
+  >
     <span
       v-for="badge in badges"
       :key="badge.label"
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index ccaf546c1..2b1b6fbe4 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -7,7 +7,7 @@
     :tabindex="interactive ? 0 : -1"
     :class="
       cn(
-        'rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
+        'select-none rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
         interactive &&
           'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4',
         focused && 'bg-secondary-background outline-solid'
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 05e0b0a10..03c624a79 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -15,7 +15,7 @@
     </div>
     <div
       v-else-if="assets.length === 0"
-      class="flex h-full flex-col items-center justify-center py-16 text-muted-foreground"
+      class="flex h-full select-none flex-col items-center justify-center py-16 text-muted-foreground"
     >
       <i class="mb-4 icon-[lucide--search] size-10" />
       <h3 class="mb-2 text-lg font-medium">
diff --git a/src/platform/assets/components/modelInfo/ModelInfoField.vue b/src/platform/assets/components/modelInfo/ModelInfoField.vue
index 13a3206e7..448c9a0b6 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoField.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoField.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 px-4 py-2 text-sm text-base-foreground">
     <div class="flex items-center justify-between relative">
-      <span>{{ label }}</span>
+      <span class="select-none">{{ label }}</span>
       <slot name="label-action" />
     </div>
     <slot />
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
index 834f33afa..589aab257 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
@@ -5,7 +5,7 @@
   >
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="text-xs uppercase font-inter select-none">
           {{ t('assetBrowser.modelInfo.basicInfo') }}
         </span>
       </template>
@@ -58,7 +58,7 @@
 
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="text-xs uppercase font-inter select-none">
           {{ t('assetBrowser.modelInfo.modelTagging') }}
         </span>
       </template>
@@ -134,7 +134,7 @@
 
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="text-xs uppercase font-inter select-none">
           {{ t('assetBrowser.modelInfo.modelDescription') }}
         </span>
       </template>