Add some padding to the shadowed comment box (#9612)

* Add some padding to the shadowed comment box
* prevent the padding affecting the other comments

Author: zeripath

templates/repo/issue/view_content/comments.tmpl

@@ -360,19 +360,21 @@
 												<img src="{{.Poster.RelAvatarLink}}">
 											</a>
 											<div class="content">
-												<a class="author" {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
-												<div class="metadata">
-													<span class="date">{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}</span>
-												</div>
-												<div class="text">
-													<div class="render-content markdown has-emoji">
-													{{if .RenderedContent}}
-														{{.RenderedContent|Str2html}}
-													{{else}}
-														<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
-													{{end}}
+												<div class="code-comment-content">
+													<a class="author" {{if gt .Poster.ID 0}}href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
+													<div class="metadata">
+														<span class="date">{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}</span>
+													</div>
+													<div class="text">
+														<div class="render-content markdown has-emoji">
+														{{if .RenderedContent}}
+															{{.RenderedContent|Str2html}}
+														{{else}}
+															<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
+														{{end}}
+														</div>
+														<div class="raw-content hide">{{.Content}}</div>
 													</div>
-													<div class="raw-content hide">{{.Content}}</div>
 												</div>
 											</div>
 										</div>

web_src/less/_repository.less

@@ -850,6 +850,14 @@
                     box-shadow: 0 0 10px #8c8c8c;
                 }
 
+                &:target > .content > .code-comment-content {
+                    padding: 4px;
+                }
+
+                &:target > .content > .code-comment-content > .text {
+                    margin-bottom: 0;
+                }
+
                 .ui.form {
                     .field:first-child {
                         clear: none;