Adjust the layout of the gutter on the inline blame mode on the blob page
Context
In the context of this issue: #441970 (closed) we will explore design solutions to not change the height of the lines when the blame information drops in. This aims are reducing CLS upon toggling between Blame mode and others.
This is a bit tricky because we will only know the exact layout once we receive blame data.
We add extra spacing between some lines to accommodate the additional height required for the blame information. Adding the extra spacing between lines shifts the contents. So if a user is on line 500 and blame information for line 470 is retrieved, the user will experience layout shift as the extra spacing is added for content above the line that the user is viewing.
collapsed expanded If there's a way for us to display the blame information without having to add extra spacing to the source code lines, it should prevent the layout shift.
@alyssatrinhdo you think there's a way to display blame information without having to add extra spacing between the lines? Notice in the screenshot, we only add extra spacing when the blame spans a single line to make space for the profile picture and the authored/date information. Perhaps we can hide this information or display it differently so that it fits on a single line?
Design proposal
See #561788 (comment 2822918686)
| Screen | Notes | |
|---|---|---|
| Default | Code view Blame view default | 
 | 
| Show age indicator legend | 
 | |
| Hover interactions | 
 | 






