🐛 Fix paddings of right side panel on viewer

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

@@ -58,6 +58,7 @@
 }
 
 .viewer-section {
+  @extend .new-scrollbar;
   grid-row: 1 / span 2;
   grid-column: 1 / span 1;
   display: flex;
@@ -94,7 +95,7 @@
 }
 
 .viewer-go-next.comment-sidebar {
-  right: $s-264;
+  right: $s-280;
 }
 
 .viewer-go-prev {

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

@@ -104,7 +104,7 @@
   position: absolute;
   right: 0;
   top: $s-44;
-  width: $s-256;
+  width: $s-276;
   height: calc(100vh - $s-48);
   z-index: $z-index-10;
   background-color: var(--panel-background-color);

frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss

@@ -20,6 +20,10 @@
   }
 }
 
+.viewer-code {
+  padding: 0 $s-8;
+}
+
 .tool-windows {
   height: 100%;
   display: flex;

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

@@ -27,7 +27,7 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (mf/defc sidebar-options
-  []
+  [{:keys [from-viewer]}]
   (let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
         update-mode
         (mf/use-fn
@@ -44,7 +44,8 @@
            (let [mode (if (= :pending cshow) :all :pending)]
              (st/emit! (dcm/update-filters {:show mode})))))]
 
-    [:ul {:class (stl/css :comment-mode-dropdown)}
+    [:ul {:class (stl/css-case :comment-mode-dropdown true
+                               :viewer-dropdown from-viewer)}
      [:li {:class (stl/css-case :dropdown-item true
                                 :selected (or (= :all cmode) (nil? cmode)))
            :data-value "all"
@@ -115,8 +116,10 @@
                         (dwcm/center-to-comment-thread thread)
                         (-> (dcm/open-thread thread)
                             (with-meta {::ev/origin "workspace"})))))))]
-    [:div  {:class (stl/css :comments-section)}
-     [:div {:class (stl/css :comments-section-title)}
+    [:div  {:class (stl/css-case :comments-section true
+                                 :from-viewer  from-viewer)}
+     [:div {:class (stl/css-case :comments-section-title true
+                                 :viewer-title from-viewer)}
       [:span (tr "labels.comments")]
       [:button {:class (stl/css :close-button)
                 :on-click close-section}
@@ -132,7 +135,7 @@
 
      [:& dropdown {:show options?
                    :on-close #(reset! state* false)}
-      [:& sidebar-options {:local local}]]
+      [:& sidebar-options {:local local :from-viewer from-viewer}]]
 
      [:div {:class (stl/css :comments-section-content)}
 

frontend/src/app/main/ui/workspace/comments.scss

@@ -13,6 +13,10 @@
   grid-template-rows: $s-40 $s-48 1fr;
 }
 
+.from-viewer {
+  padding: 0 $s-8;
+}
+
 .comments-section-title {
   @include flexCenter;
   @include uppercaseTitleTipography;
@@ -29,6 +33,11 @@
   }
 }
 
+.viewer-title {
+  margin: 0;
+  margin-block-start: $s-8;
+}
+
 .close-button {
   @extend .button-tertiary;
   position: absolute;
@@ -48,7 +57,8 @@
   @extend .asset-element;
   background-color: var(--color-background-tertiary);
   display: flex;
-  width: $s-256;
+  width: 100%;
+  max-width: $s-256;
   height: $s-32;
   padding: $s-8;
   border-radius: $br-8;
@@ -79,7 +89,12 @@
   @extend .dropdown-wrapper;
   top: $s-92;
   left: $s-12;
-  width: $s-256;
+  max-width: $s-256;
+  width: 100%;
+}
+
+.viewer-dropdown {
+  left: $s-8;
 }
 
 .dropdown-item {