From 83efa28b121faa5f0cc541afc35e6cfb1c9f806c Mon Sep 17 00:00:00 2001 From: Filip Sajdak Date: Mon, 10 Aug 2026 16:18:58 +0200 Subject: [PATCH] :bug: Keep comment bubbles from painting over the rulers (#11168) The comments layer lives in the viewport overlays, which are absolutely positioned above the canvas, and the container itself carries a high z-index. A comment bubble panned into the ruler bars therefore painted on top of them, covering the ticks and numbers. Clip the comments container to the area outside the ruler bars while the rulers are visible, the same thing the `clip-handlers` clip path already does so the selection handlers stay off the rulers. Clipping only the comments container leaves the text editing overlay, which shares the viewport overlays, untouched. Fixes #11163. Signed-off-by: Filip Sajdak Co-authored-by: Claude Opus 5 --- frontend/src/app/main/ui/workspace/viewport.cljs | 3 ++- .../app/main/ui/workspace/viewport/comments.cljs | 13 +++++++++++-- .../src/app/main/ui/workspace/viewport_wasm.cljs | 3 ++- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 5f71417631..4814be5042 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -363,7 +363,8 @@ :page-id page-id :file-id file-id :vport vport - :zoom zoom}]) + :zoom zoom + :show-rulers show-rulers?}]) (when picking-color? [:> pixel-overlay/pixel-overlay* {:vport vport diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs index 288b537f1b..ca0117bae5 100644 --- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs @@ -13,6 +13,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.comments :as cmt] + [app.main.ui.workspace.viewport.rulers :as rulers] [rumext.v2 :as mf])) ;; Pin transform for the bubble's frame so it follows the frame during a drag, @@ -70,7 +71,7 @@ (mf/defc comments-layer* {::mf/wrap [mf/memo]} - [{:keys [vbox vport zoom file-id page-id]}] + [{:keys [vbox vport zoom file-id page-id show-rulers]}] (let [vbox-x (dm/get-prop vbox :x) vbox-y (dm/get-prop vbox :y) vport-w (dm/get-prop vport :width) @@ -114,7 +115,15 @@ {:id "comments" :class (stl/css :workspace-comments-container) :style {:width (dm/str vport-w "px") - :height (dm/str vport-h "px")}} + :height (dm/str vport-h "px") + ;; This layer sits above the canvas, so without clipping the + ;; bubbles paint over the rulers as they pan past them. Keep + ;; them out of the ruler bars, like `clip-handlers` does for + ;; the selection handlers. + :clip-path (when show-rulers + (dm/fmt "inset(%px 0 0 %px)" + rulers/ruler-area-size + rulers/ruler-area-size))}} [:div {:class (stl/css :threads) :style {:transform (dm/fmt "translate(%px, %px)" pos-x pos-y)}} diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index b55d8c554c..5a9601502d 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs @@ -666,7 +666,8 @@ :page-id page-id :file-id file-id :vport vport - :zoom zoom}]) + :zoom zoom + :show-rulers show-rulers?}]) (when picking-color? [:> pixel-overlay/pixel-overlay-wasm* {:viewport-ref viewport-ref