diff options
| author | Simon Priet <105607989+SimonPistache@users.noreply.github.com> | 2024-08-13 01:36:28 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-08-13 07:36:28 +0800 |
| commit | fe7c9416777243264e8482d3af29e30c2b671074 (patch) | |
| tree | ae91de1fb2d72e07dc2540dd8db13cf0f00c6eda | |
| parent | 8883d99184e6d425cf5279cd2ab0b1664895c673 (diff) | |
| download | gitea-fe7c9416777243264e8482d3af29e30c2b671074.tar.gz gitea-fe7c9416777243264e8482d3af29e30c2b671074.zip | |
Scroll images in project issues separately from the remaining issue (#31683)
As discussed in #31667 & #26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.
---
Issue #31667 is open to discussion as there should be room for
improvement.
| -rw-r--r-- | web_src/css/features/projects.css | 7 | ||||
| -rw-r--r-- | web_src/css/repo/issue-card.css | 2 |
2 files changed, 7 insertions, 2 deletions
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 151b0a23d9..4a0205c910 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -70,7 +70,9 @@ .card-attachment-images { display: inline-block; white-space: nowrap; - overflow: hidden; + overflow: scroll; + cursor: default; + scroll-snap-type: x mandatory; text-align: center; } @@ -78,7 +80,10 @@ display: inline-block; max-height: 50px; border-radius: var(--border-radius); + text-align: left; + scroll-snap-align: center; margin-right: 2px; + aspect-ratio: 1; } .card-attachment-images img:only-child { diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index 390bfb6a01..fb832bd05a 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; gap: 4px; - align-items: start; + align-items: stretch; border-radius: var(--border-radius); padding: 8px 10px; border: 1px solid var(--color-secondary); |