🐛 Correct animations overflow

CHANGES.md

@@ -42,6 +42,7 @@
 - Fix decimal numbers in export viewbox [Taiga #2290](https://tree.taiga.io/project/penpot/issue/2290)
 
 ### :arrow_up: Deps updates
+
 ### :heart: Community contributions by (Thank you!)
 
 - Spelling fixes (by @jsoref) [#1340](https://github.com/penpot/penpot/pull/1340).

frontend/resources/styles/main/partials/viewer.scss

@@ -20,11 +20,16 @@
   overflow: auto;
 
   & .viewer-wrapper {
+    position: relative;
+  }
+
+  & .viewer-clipper {
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 1fr;
     justify-items: center;
     align-items: center;
+    overflow: hidden;
 
     .empty-state {
       justify-content: center;

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

@@ -231,6 +231,8 @@
              {:style {:width (:width wrapper-size)
                       :height (:height wrapper-size)}}
 
+             [:div.viewer-clipper
+              [:*
                (when orig-frame
                  [:div.viewport-container
                   {:ref orig-viewport-ref
@@ -252,14 +254,7 @@
                 {:ref current-viewport-ref
                  :style {:width (:width size)
                          :height (:height size)
-                       :position "relative"}
-               }
-              (when (= section :comments)
-                [:& comments-layer {:file file
-                                    :users users
-                                    :frame frame
-                                    :page page
-                                    :zoom zoom}])
+                         :position "relative"}}
 
                 [:& interactions/viewport
                  {:frame frame
@@ -300,7 +295,14 @@
                         :page page
                         :file file
                         :users users
-                      :interactions-mode interactions-mode}]]]))]]]))]]]))
+                        :interactions-mode interactions-mode}]]]))]]
+
+              (when (= section :comments)
+                [:& comments-layer {:file file
+                                    :users users
+                                    :frame frame
+                                    :page page
+                                    :zoom zoom}])]]]))]]]))
 
 ;; --- Component: Viewer Page