Rework blame template and styling (#11885)

* Rework blame template and styling

* cleanup template and add missing NumLines

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

2 files changed, 15 insertions, 6 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index b88b4a8a55..a80806ec20 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1069,7 +1069,6 @@ i.icons {
 }
 
 .lines-num {
-    vertical-align: top;
     text-align: right !important;
     color: #999999;
     background: #f5f5f5;
@@ -1077,7 +1076,13 @@ i.icons {
     user-select: none;
 
     span {
-        &:before {
+        &.bottom-line {
+            &:after {
+                border-bottom: 1px solid #eaecef;
+            }
+        }
+
+        &:after {
             content: attr(data-line-number);
             line-height: 20px !important;
             padding: 0 10px;
@@ -1090,6 +1095,7 @@ i.icons {
 .lines-num,
 .lines-code {
     padding: 0 !important;
+    vertical-align: top;
 
     pre,
     ol,
@@ -1101,7 +1107,7 @@ i.icons {
         li {
             display: block;
             width: calc(100% - 1ch);
-            margin-left: 1ch;
+            padding-left: 1ch;
         }
     }
 }
@@ -1149,7 +1155,6 @@ i.icons {
     }
 }
 
-.lines-num,
 .lines-code,
 .lines-commit {
     .bottom-line {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index f37eea3ccc..bfba20d4c9 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1,5 +1,4 @@
 .repository {
-
     padding-top: 15px;
 
     .repo-header {
@@ -246,6 +245,12 @@
     }
 
     &.file.list {
+        &.blame {
+            .ui.container:not(.flex) {
+                width: 98%;
+            }
+        }
+
         .repo-description {
             display: flex;
             justify-content: space-between;
@@ -1646,7 +1651,6 @@
                 width: 1%;
                 min-width: 50px;
                 user-select: none;
-                vertical-align: top;
 
                 span.fold {
                     display: block;