Skip to content

Commit 9efcce5

Browse files
authored
Fix sticky header in diff view (#23554)
Ressurection of #23549. Fix regression #23513 (comment) from #23271. The previous sticky CSS did assume the content is always 2 rows, but since that PR, it's single-row above 993px width. Adjust the sticky offset to match and add a small tweak that hides content behind the `border-radius`. Single row: <img width="1264" alt="Screenshot 2023-03-17 at 21 33 05" src="https://user-images.githubusercontent.com/115237/226034050-a04b131d-fd3f-45c0-bc72-413738a59825.png"> Double row: <img width="1243" alt="Screenshot 2023-03-17 at 21 32 53" src="https://user-images.githubusercontent.com/115237/226034163-2f1c6aa9-fc72-432f-bc46-9a7119da8677.png">
1 parent 27fcfae commit 9efcce5

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

Diff for: web_src/css/repository.css

+10-2
Original file line numberDiff line numberDiff line change
@@ -1615,12 +1615,14 @@
16151615
padding: 7px 0;
16161616
background: var(--color-body);
16171617
line-height: 30px;
1618+
height: 47px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
16181619
}
16191620

16201621
@media (max-width: 991px) {
16211622
.repository .diff-detail-box {
16221623
flex-direction: column;
16231624
align-items: flex-start;
1625+
height: 77px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
16241626
}
16251627
}
16261628

@@ -1634,7 +1636,7 @@
16341636
position: sticky;
16351637
top: 0;
16361638
z-index: 8;
1637-
border-bottom: 1px solid var(--color-secondary);
1639+
border-bottom: none;
16381640
padding-left: 2px;
16391641
padding-right: 2px;
16401642
margin-left: -1px;
@@ -3322,10 +3324,16 @@ td.blob-excerpt {
33223324

33233325
.ui.attached.header.diff-file-header.sticky-2nd-row {
33243326
position: sticky;
3325-
top: 77px;
3327+
top: 47px; /* match .repository .diff-detail-box */
33263328
z-index: 7;
33273329
}
33283330

3331+
@media (max-width: 991px) {
3332+
.ui.attached.header.diff-file-header.sticky-2nd-row {
3333+
top: 77px; /* match .repository .diff-detail-box */
3334+
}
3335+
}
3336+
33293337
@media (max-width: 480px) {
33303338
.ui.attached.header.diff-file-header.sticky-2nd-row {
33313339
position: static;

0 commit comments

Comments
 (0)