diff options
| author | silverwind <me@silverwind.io> | 2023-03-18 23:51:00 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-18 18:51:00 -0400 |
| commit | 9efcce563bf461c734226833ab870f08c720c6d9 (patch) | |
| tree | ef06e5b8c1f4f0221659992dd104c03158a04628 /web_src | |
| parent | 27fcfae6d9226b13737504cc1a904ef46d3dad80 (diff) | |
| download | gitea-9efcce563bf461c734226833ab870f08c720c6d9.tar.gz gitea-9efcce563bf461c734226833ab870f08c720c6d9.zip | |
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:
<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">
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 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; |