fix(ui): make invitation links selectable (#330)

* Keep invitation URLs left to right

* Make invitation links selectable

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>

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 {