1 files changed, 56 insertions, 2 deletions
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 1c43212f501..2b76e70fa17 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -31,7 +31,8 @@
         width: 100%;
         padding-left: 10px;
         padding-right: 10px;
-        white-space: pre;
+        white-space: break-spaces;
+        word-break: break-word;
 
         &:empty::before {
           content: '\200b';
@@ -48,8 +49,9 @@
 
     a {
       font-family: $monospace-font;
-      display: block;
       white-space: nowrap;
+      @include gl-display-flex;
+      @include gl-justify-content-end;
 
       i,
       svg {
@@ -90,3 +92,55 @@ td.line-numbers {
   cursor: pointer;
   text-decoration: underline wavy $red-500;
 }
+
+.blob-viewer {
+  .line-numbers {
+    // for server-side-rendering
+    .line-links {
+      @include gl-display-flex;
+
+
+      &:first-child {
+        margin-top: 10px;
+      }
+
+      &:last-child {
+        margin-bottom: 10px;
+      }
+    }
+
+    // for client
+    &.line-links {
+      min-width: 6rem;
+      border-bottom-left-radius: 0;
+
+      + pre {
+        margin-left: 6rem;
+      }
+    }
+  }
+
+  .line-links {
+    &:hover a::before,
+    &:focus-within a::before {
+      @include gl-visibility-visible;
+    }
+  }
+
+  .file-line-num {
+    min-width: 4.5rem;
+    @include gl-justify-content-end;
+    @include gl-flex-grow-1;
+    @include gl-pr-3;
+  }
+
+  .file-line-blame {
+    @include gl-ml-3;
+  }
+
+  .file-line-num,
+  .file-line-blame {
+    @include gl-align-items-center;
+    @include gl-display-flex;
+  }
+}