🐛 Fix missing scroll in comments

CHANGES.md

@@ -16,6 +16,8 @@
 - Add locking degrees increment (hold shift) on path edition [Taiga #7761](https://tree.taiga.io/project/penpot/issue/7761)
 - Persistence & Concurrent Edition Enhancements [Taiga #5657](https://tree.taiga.io/project/penpot/us/5657)
 - Allow library colors as recent colors [Taiga #7640](https://tree.taiga.io/project/penpot/issue/7640)
+- Missing scroll in viewmode comments [Taiga #7427](https://tree.taiga.io/project/penpot/issue/7427)
+- Comments in View mode should mimic the positioning behavior of the Workspace [Taiga #7346](https://tree.taiga.io/project/penpot/issue/7346)
 
 ### :bug: Bugs fixed
 

frontend/playwright/data/workspace/update-comment-thread-status.json

@@ -0,0 +1 @@
+{}

frontend/playwright/ui/pages/ViewerPage.js

@@ -43,4 +43,18 @@ export class ViewerPage extends BaseWebSocketPage {
   async cleanUp() {
     await this.#ws.mockClose();
   }
+
+  async showComments(clickOptions = {}) {
+    await this.page
+      .getByRole("button", { name: "Comments (G C)" })
+      .click(clickOptions);
+  }
+
+  async showCommentsThread(number, clickOptions = {}) {
+    await this.page
+    .getByTestId("floating-thread-bubble")
+    .filter({ hasText: number.toString() })
+    .click(clickOptions);
+  }
 }
+

frontend/playwright/ui/specs/viewer-comments.spec.js

@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test";
+import { ViewerPage } from "../pages/ViewerPage";
+
+test.beforeEach(async ({ page }) => {
+  await ViewerPage.init(page);
+});
+
+const singleBoardFileId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb1";
+const singleBoardPageId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb2";
+
+const setupFileWithSingleBoard = async (viewer) => {
+  await viewer.mockRPC(/get\-view\-only\-bundle\?/, "viewer/get-view-only-bundle-single-board.json");
+  await viewer.mockRPC("get-comment-threads?file-id=*", "workspace/get-comment-threads-not-empty.json");
+  await viewer.mockRPC(
+    "get-file-fragment?file-id=*&fragment-id=*",
+    "viewer/get-file-fragment-single-board.json",
+  );
+  await viewer.mockRPC("get-comments?thread-id=*", "workspace/get-thread-comments.json");
+  await viewer.mockRPC("update-comment-thread-status", "workspace/update-comment-thread-status.json");
+};
+
+test("Comment is shown with scroll and valid position", async ({ page }) => {
+  const viewer = new ViewerPage(page);
+  await viewer.setupLoggedInUser();
+  await setupFileWithSingleBoard(viewer);
+
+  await viewer.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+  await viewer.showComments();
+  await viewer.showCommentsThread(1);
+  await expect(viewer.page.getByRole("textbox", { name: "Reply" })).toBeVisible();
+  await viewer.showCommentsThread(1);
+  await viewer.showCommentsThread(2);
+  await expect(viewer.page.getByRole("textbox", { name: "Reply" })).toBeVisible();
+});

frontend/src/app/main/ui/comments.cljs

@@ -181,6 +181,7 @@
     [:*
      [:div
       {:class (stl/css :floating-thread-bubble)
+       :data-testid "floating-thread-bubble"
        :style {:top (str pos-y "px")
                :left (str pos-x "px")}
        :on-click dom/stop-propagation}
@@ -435,9 +436,9 @@
           [:* {:key (dm/str (:id item))}
            [:& comment-item {:comment item
                              :users users
-                             :origin origin}]])
-        [:div {:ref ref}]]
-       [:& reply-form {:thread thread}]])))
+                             :origin origin}]])]
+       [:& reply-form {:thread thread}]
+       [:div {:ref ref}]])))
 
 (defn use-buble
   [zoom {:keys [position frame-id]}]
@@ -558,6 +559,7 @@
            :on-pointer-move on-pointer-move*
            :on-click on-click*
            :on-lost-pointer-capture on-lost-pointer-capture
+           :data-testid "floating-thread-bubble"
            :class (stl/css-case
                    :floating-thread-bubble true
                    :resolved (:is-resolved thread)

frontend/src/app/main/ui/viewer/comments.cljs

@@ -134,6 +134,8 @@
         page-id        (:id page)
         file-id        (:id file)
         frame-id       (:id frame)
+        vsize          (-> (mf/deref refs/viewer-local)
+                           :viewport-size)
 
         tpos-ref     (mf/with-memo [page-id]
                        (-> (l/in [:pages page-id :options :comment-threads-position])
@@ -216,6 +218,7 @@
          [:& cmt/thread-comments
           {:thread thread
            :position-modifier modifier1
+           :viewport {:offset-x 0 :offset-y 0 :width (:width vsize) :height (:height vsize)}
            :users users
            :zoom zoom}])