diff options
Diffstat (limited to 'app/assets/stylesheets/framework/files.scss')
| -rw-r--r-- | app/assets/stylesheets/framework/files.scss | 33 |
1 files changed, 14 insertions, 19 deletions
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 8f65f349cf9..9209a0c2173 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -151,7 +151,17 @@ margin: 0; } + // + // IMPORTANT PERFORMANCE OPTIMIZATION + // + // When viewinng a blame with many commits a lot of content is rendered on the page. + // content-visibility rule below ensure that we only render what is visible to the user, + // thus reducing TBT in the browser. + // Grid is used instead of table layout because content-visibility performs better with it. tr { + content-visibility: auto; + display: grid; + grid-template-columns: 400px max-content auto; border-bottom: 1px solid $gray-darker; &:last-child { @@ -201,6 +211,10 @@ &.lines { padding: 0; } + + .code { + height: 100%; + } } @for $i from 0 through 5 { @@ -222,25 +236,6 @@ color: $gray-900; } } - - // - // IMPORTANT PERFORMANCE OPTIMIZATION - // - // When viewinng a blame with many commits a lot of content is rendered on the page. - // content-visibility rules below ensure that we only render what is visible to the user, thus reducing TBT in the browser. - .commit { - content-visibility: auto; - contain-intrinsic-size: 1px 3em; - } - - code .line { - content-visibility: auto; - contain-intrinsic-size: 1px 1.1875rem; - } - - .line-numbers { - content-visibility: auto; - } } &.logs { |