From cc633c9af85d16d50bfc60f3419ca602bb9a5c84 Mon Sep 17 00:00:00 2001
From: AAA <35992542+TNTcraftHIM@users.noreply.github.com>
Date: Sat, 29 Aug 2026 16:27:58 +0800
Subject: [PATCH] fix(ui): make invitation links selectable (#330)

* Keep invitation URLs left to right

* Make invitation links selectable
---
 src/client/pages/HostPage.tsx | 14 +++++++++++---
 src/client/styles.css         |  7 ++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/client/pages/HostPage.tsx b/src/client/pages/HostPage.tsx
index dc24bb1..a21d213 100644
--- a/src/client/pages/HostPage.tsx
+++ b/src/client/pages/HostPage.tsx
@@ -2981,9 +2981,17 @@ export function HostPage({ onAuthorizationRequired }: HostPageProps = {}) {
                 />
               </RowGroup>
               {room.inviteUrl ? (
-                <code className="lr-invite-url" title={room.inviteUrl}>
-                  {room.inviteUrl}
-                </code>
+                <input
+                  className="lr-invite-url"
+                  type="text"
+                  dir="ltr"
+                  value={room.inviteUrl}
+                  readOnly
+                  spellCheck={false}
+                  aria-label={t("host.invite")}
+                  title={room.inviteUrl}
+                  onFocus={(event) => event.currentTarget.select()}
+                />
               ) : null}
               <span className="lr-divider" aria-hidden="true" />
               <RowGroup>
diff --git a/src/client/styles.css b/src/client/styles.css
index b3eefbe..144d578 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -652,11 +652,12 @@ html[data-theme="dark"] .lr-viewer-host-slot svg { color: #9bb0c5; }
   border-radius: 8px;
   background: var(--wall-2);
   color: var(--ink);
+  cursor: text;
   font-family: var(--mono);
   font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  user-select: all;
+  outline: 0;
+  text-align: left;
+  user-select: text;
 }
 html[data-theme="dark"] .lr-invite-url { background: #1a2634; border-color: #33465c; }
 .lr-status-text {