diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index 8bdd338af..c884e0c71 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/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 { diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss index c7f5f95db..46a19e702 100644 --- a/frontend/src/app/main/ui/viewer/comments.scss +++ b/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); diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss index 00ea349ec..1c58444d3 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs index 26b52d3af..d74fa287b 100644 --- a/frontend/src/app/main/ui/workspace/comments.cljs +++ b/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)} diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index 972d24ed4..fdfb52292 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/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 {