From 51432ebb9c6f59c618ff34147f4b644c8bfb52f5 Mon Sep 17 00:00:00 2001
From: John Olheiser <42128690+jolheiser@users.noreply.github.com>
Date: Mon, 2 Dec 2019 17:03:30 -0600
Subject: [PATCH] Fix context menu overflow & review tag margin (#9231)

* Fix context menu overflow

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add review tag CSS

Signed-off-by: jolheiser <john.olheiser@gmail.com>
---
 public/css/index.css              | 4 +++-
 templates/repo/diff/box.tmpl      | 2 +-
 templates/repo/diff/comments.tmpl | 4 ++--
 web_src/less/_base.less           | 6 ++++++
 web_src/less/_repository.less     | 8 +++++---
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index dd87c2f13..a267a0d47 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -248,6 +248,7 @@ i.icon.centerlock{top:1.5em}
 .lines-commit .ui.avatar.image{height:18px;width:18px}
 .lines-code .bottom-line,.lines-commit .bottom-line,.lines-num .bottom-line{border-bottom:1px solid #eaecef}
 .code-view{overflow:auto;overflow-x:auto;overflow-y:hidden}
+.code-view.has-context-menu{overflow:visible;overflow-x:visible;overflow-y:visible}
 .code-view :not(.fa):not(.octicon):not(.icon){font-size:12px;font-family:'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace;line-height:20px}
 .code-view table{width:100%}
 .code-view .active{background:#fff866}
@@ -572,7 +573,8 @@ i.icon.centerlock{top:1.5em}
 .repository.view.issue .comment-list .timeline-line:before{display:block;content:"";position:absolute;margin-top:12px;margin-bottom:14px;top:0;bottom:0;left:82px;width:2px;background-color:#f3f3f3;z-index:-1}
 .repository.view.issue .comment-list .comment .avatar{width:3em}
 .repository.view.issue .comment-list .comment .tag{color:#767676;margin-top:3px;padding:2px 5px;font-size:12px;border:1px solid rgba(0,0,0,.1);border-radius:3px}
-.repository.view.issue .comment-list .comment .tag.pending{color:#000;background-color:#fffbb2;margin-left:5px}
+.repository.view.issue .comment-list .comment .tag.review{margin-left:5px}
+.repository.view.issue .comment-list .comment .tag.review.pending{color:#000;background-color:#fffbb2}
 .repository.view.issue .comment-list .comment .actions .item{float:left}
 .repository.view.issue .comment-list .comment .actions .item.context{float:none}
 .repository.view.issue .comment-list .comment .actions .item.tag{margin-right:5px}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 088dc5718..9f3b271e2 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -113,7 +113,7 @@
 					</h4>
 					<div class="ui attached unstackable table segment">
 						{{if ne $file.Type 4}}
-							<div class="file-body file-code code-view code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
+							<div class="file-body file-code code-view has-context-menu code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
 								<table>
 									<tbody>
 										{{if $isImage}}
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index d86cf4077..26029dbaa 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -11,11 +11,11 @@
 			<div class="ui right actions">
 			{{if and .Review}}
 				{{if eq .Review.Type 0}}
-					<div class="item tag pending">
+					<div class="item tag review pending">
 					{{$.root.i18n.Tr "repo.issues.review.pending"}}
 					</div>
 				{{else}}
-					<div class="item tag">
+					<div class="item tag review">
 					{{$.root.i18n.Tr "repo.issues.review.review"}}
 					</div>
 				{{end}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index a39977065..0fb12878f 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1092,6 +1092,12 @@ i.icon.centerlock {
     overflow-x: auto;
     overflow-y: hidden;
 
+    &.has-context-menu {
+        overflow: visible;
+        overflow-x: visible;
+        overflow-y: visible;
+    }
+
     *:not(.fa):not(.octicon):not(.icon) {
         font-size: 12px;
         font-family: @monospaced-fonts, monospace;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 1b47de8a1..b1ac049b2 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -737,10 +737,12 @@
                     font-size: 12px;
                     border: 1px solid rgba(0, 0, 0, 0.1);
                     border-radius: 3px;
-                    &.pending {
-                        color: black;
-                        background-color: #fffbb2;
+                    &.review {
                         margin-left: 5px;
+                        &.pending {
+                            color: black;
+                            background-color: #fffbb2;
+                        }
                     }
                 }