From 37ae830cbfac154104b35cea86006c5bf1a1cf0e Mon Sep 17 00:00:00 2001 From: iRedTea Date: Fri, 16 Oct 2026 17:51:27 +0300 Subject: [PATCH] fix: Safari - drags no longer select page text (user-select needs its -webkit- twin there), the drag ghost follows the pointer without a transition --- internal/server/web/static/app.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/internal/server/web/static/app.css b/internal/server/web/static/app.css index 838ee48..b93d781 100644 --- a/internal/server/web/static/app.css +++ b/internal/server/web/static/app.css @@ -327,7 +327,7 @@ body.multi .tabs, body.multi-hint .tabs { max-height:48px; opacity:1; padding-to .tablist::-webkit-scrollbar { display:none; } .tab { display:flex; align-items:center; gap:8px; flex:none; min-width:0; height:34px; padding:0 6px 0 12px; box-sizing:border-box; border:1px solid var(--border); border-bottom:0; border-radius:9px 9px 0 0; background:#11151b; color:var(--muted); - font-size:13px; user-select:none; cursor:default; overflow:hidden; white-space:nowrap; + font-size:13px; user-select:none; -webkit-user-select:none; cursor:default; overflow:hidden; white-space:nowrap; transition:background .18s, color .18s, width .22s ease, max-width .22s ease, opacity .2s, padding .22s ease; } .tab:hover { color:var(--text); background:#151a21; } .tab.on { background:var(--panel); color:var(--text); } @@ -377,7 +377,7 @@ body.multi .float-add { opacity:0; pointer-events:none; } .tabview.split .pane { border:1px solid var(--border); } .tabview.split .pane.active { border-color:rgba(79,157,255,.7); } .tabview.split .pane-head { display:flex; align-items:center; gap:7px; flex:none; height:26px; padding:0 4px 0 9px; - background:#11151b; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); cursor:grab; user-select:none; } + background:#11151b; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); cursor:grab; user-select:none; -webkit-user-select:none; } .tabview.split .pane.active .pane-head { color:var(--text); } .pane-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pane-body { flex:1; min-height:0; padding:4px 0 0 4px; } @@ -395,9 +395,11 @@ body:not(.touch) .tabview:not(.split) .xterm .xterm-viewport { right:-7px; } pointer-events:none; transition:left .14s ease, top .14s ease, width .14s ease, height .14s ease; } .hint.bad { border-color:var(--danger); background:rgba(255,92,92,.12); } .hint[hidden] { display:none; } +/* No transition on the ghost: restarted on every pointer move, Safari draws + it at the old and the new place at once - doubled and jerky. */ .drag-ghost { position:fixed; left:0; top:0; z-index:60; pointer-events:none; padding:7px 12px; border:1px solid var(--accent); border-radius:8px; background:var(--panel); color:var(--text); font-size:13px; white-space:nowrap; - box-shadow:0 12px 30px rgba(0,0,0,.55); transition:transform .04s linear; } + box-shadow:0 12px 30px rgba(0,0,0,.55); will-change:transform; } .drag-ghost[data-hint]:not([data-hint=""])::after { content:attr(data-hint); display:block; margin-top:3px; font-size:11px; color:var(--muted); } body.dnd, body.dnd * { cursor:grabbing !important; } .tab, .tab *, .pane-head, .pane-head *, .ai-head, .ai-head *, .ai-fab, @@ -530,7 +532,7 @@ table.fm td, table.fm th { padding:7px 8px; } .sz { color:var(--muted); font-variant-numeric:tabular-nums; } .act { display:flex; gap:6px; justify-content:flex-end; } /* Sortable headers: a click sorts by the column, a second one turns it round. */ -table.fm th.srt { cursor:pointer; user-select:none; white-space:nowrap; } +table.fm th.srt { cursor:pointer; user-select:none; -webkit-user-select:none; white-space:nowrap; } table.fm th.srt:hover { color:var(--text); } table.fm .c-sz { width:84px; } table.fm .c-mt { width:150px; } @@ -935,8 +937,8 @@ dialog.uidlg { width:fit-content; min-width:min(300px, 92vw); max-width:min(560p .ai-pill:hover { color:var(--text); border-color:#3a4554; } .ai-pill[aria-pressed="true"] { background:rgba(91,140,255,.16); color:#9db8ff; border-color:rgba(91,140,255,.55); } /* The chat's title moves it on a computer. */ -body:not(.touch) .ai-head { cursor:grab; user-select:none; } -body.ai-dragging, body.ai-dragging * { cursor:grabbing !important; user-select:none; } +body:not(.touch) .ai-head { cursor:grab; user-select:none; -webkit-user-select:none; } +body.ai-dragging, body.ai-dragging * { cursor:grabbing !important; user-select:none; -webkit-user-select:none; } body:not(.touch) .ai-fab { cursor:grab; touch-action:none; } /* Send: the field's height, square. */ .ai-form-in textarea, .ai-send, .ai-attach { box-sizing:border-box; }