diff options
| author | Giteabot <teabot@gitea.io> | 2023-03-18 20:29:16 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-19 01:29:16 +0100 |
| commit | f5a98b0f5ba4416ecefb2baa488fd00557c516cb (patch) | |
| tree | 6b0924f5746fb64babe256916ac4a6ac5a1ff5ce /web_src | |
| parent | 1a97a84023febdb111c4c6fe3a42216068635d7b (diff) | |
| download | gitea-f5a98b0f5ba4416ecefb2baa488fd00557c516cb.tar.gz gitea-f5a98b0f5ba4416ecefb2baa488fd00557c516cb.zip | |
Fix sticky header in diff view (#23554) (#23568)
Backport #23554 by @silverwind
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:
<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">
Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/css/repository.css | 12 |
1 files changed, 10 insertions, 2 deletions
diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 8e3788b804..b71d552a1f 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -1611,12 +1611,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 */ } } @@ -1630,7 +1632,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; @@ -3318,10 +3320,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; |