🐛 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 <filip.sajdak@siili.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

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

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)}}
 

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