Sravan/BizGaze_Remote
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix: message text not selectable on desktop

Browse Source 
#msgs .bubble had a blanket user-select:none (added to suppress iOS's long-press
magnifier), which also blocked mouse text-selection on desktop. Scope the
none to touch devices only (@media (hover:none)); keep it in multi-select mode.
Desktop can now highlight/copy message text. Verified: desktop=auto,
touch=none, sel-mode=none.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Sravan
2026-08-22 19:23:21 +05:30
parent 677d418ed0
commit 1efb2e4314
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/home.html
+6 -1
View File
@@ -713,7 +713,12 @@
/* #9: disable iOS's native touch-callout on message bubbles — the "Save Image"/text-selection magnifier
that pops on touch-and-hold was hijacking our long-press action sheet (it worked once, then iOS's callout
took over). Actions live in the long-press sheet now (incl. Save for images) and Copy for text. */
#msgs .bubble{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
#msgs .bubble{-webkit-touch-callout:none;}
/* Only disable text selection on TOUCH devices — there a long-press must open our action sheet, not the OS
magnifier. On desktop (mouse) leave the message text selectable so it can be highlighted + copied. */
@media (hover:none){ #msgs .bubble{-webkit-user-select:none;user-select:none;} }
/* Multi-select mode: a click toggles the whole message, so never select text (any device). */
body.sel-mode #msgs .bubble{-webkit-user-select:none;user-select:none;}
#msgs .bubble img{-webkit-user-drag:none;}
.att-file{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.06);border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem;color:inherit;text-decoration:none;font-size:.85rem;margin:.15rem 0;max-width:240px;}
.att-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}