From 9efcce563bf461c734226833ab870f08c720c6d9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 18 Mar 2023 23:51:00 +0100 Subject: [PATCH] Fix sticky header in diff view (#23554) Ressurection of #23549. Fix regression https://github.com/go-gitea/gitea/pull/23513#issuecomment-1474356817 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: Screenshot 2023-03-17 at 21 33 05 Double row: Screenshot 2023-03-17 at 21 32 53 --- web_src/css/repository.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 2708cf4d47..abc812b5b4 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -1615,12 +1615,14 @@ padding: 7px 0; background: var(--color-body); line-height: 30px; + height: 47px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */ } @media (max-width: 991px) { .repository .diff-detail-box { flex-direction: column; align-items: flex-start; + height: 77px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */ } } @@ -1634,7 +1636,7 @@ position: sticky; top: 0; z-index: 8; - border-bottom: 1px solid var(--color-secondary); + border-bottom: none; padding-left: 2px; padding-right: 2px; margin-left: -1px; @@ -3322,10 +3324,16 @@ td.blob-excerpt { .ui.attached.header.diff-file-header.sticky-2nd-row { position: sticky; - top: 77px; + top: 47px; /* match .repository .diff-detail-box */ z-index: 7; } +@media (max-width: 991px) { + .ui.attached.header.diff-file-header.sticky-2nd-row { + top: 77px; /* match .repository .diff-detail-box */ + } +} + @media (max-width: 480px) { .ui.attached.header.diff-file-header.sticky-2nd-row { position: static;