From e3cabe877272380f5373562c99730a5a8e264d1d Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 19:23:38 +0530
Subject: [PATCH] feat: enhance UI by adding select-none class to improve text
 selection behavior in team management and breadcrumb components

---
 .../dashboard/[search_space_id]/team/page.tsx | 28 +++++++++----------
 .../components/dashboard-breadcrumb.tsx       |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 426c73e60..7b8fe49a5 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -289,12 +289,12 @@ export default function TeamManagementPage() {
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
 				transition={{ duration: 0.3 }}
-				className="min-h-screen bg-background"
-			>
-				<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-					<div className="space-y-6">
-						<div className="flex items-center justify-between">
-							<Skeleton className="h-9 w-36 rounded-md" />
+		className="min-h-screen bg-background select-none"
+		>
+			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
+				<div className="space-y-6">
+					<div className="flex items-center justify-between">
+						<Skeleton className="h-9 w-36 rounded-md" />
 							<Skeleton className="h-4 w-20" />
 						</div>
 						<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
@@ -353,11 +353,11 @@ export default function TeamManagementPage() {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			transition={{ duration: 0.3 }}
-			className="min-h-screen bg-background"
-		>
-			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-				<div className="space-y-6">
-					{/* Header row: Invite button on left, member count on right */}
+		className="min-h-screen bg-background select-none"
+	>
+		<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
+			<div className="space-y-6">
+				{/* Header row: Invite button on left, member count on right */}
 					<div className="flex items-center justify-between">
 						{canInvite && (
 							<CreateInviteDialog
@@ -565,9 +565,9 @@ function MemberRow({
 						)}
 					</div>
 					<div className="min-w-0">
-						<p className="font-medium text-sm truncate">{displayName}</p>
+						<p className="font-medium text-sm truncate select-text">{displayName}</p>
 						{member.user_display_name && member.user_email && (
-							<p className="text-xs text-muted-foreground truncate">{member.user_email}</p>
+							<p className="text-xs text-muted-foreground truncate select-text">{member.user_email}</p>
 						)}
 					</div>
 				</div>
@@ -843,7 +843,7 @@ function CreateInviteDialog({
 					Invite members
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6">
+			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6 select-none">
 				{createdInvite ? (
 					<>
 						<DialogHeader>
diff --git a/surfsense_web/components/dashboard-breadcrumb.tsx b/surfsense_web/components/dashboard-breadcrumb.tsx
index 5c6399ce0..d907ca6d1 100644
--- a/surfsense_web/components/dashboard-breadcrumb.tsx
+++ b/surfsense_web/components/dashboard-breadcrumb.tsx
@@ -196,7 +196,7 @@ export function DashboardBreadcrumb() {
 	}
 
 	return (
-		<Breadcrumb>
+		<Breadcrumb className="select-none">
 			<BreadcrumbList>
 				{breadcrumbs.map((item, index) => (
 					<React.Fragment key={`${index}-${item.href || item.label}`}>