From a3633b53d4f5159732400ce05d3fe58959d3ca30 Mon Sep 17 00:00:00 2001 From: Giteabot Date: Tue, 13 Aug 2024 10:43:48 +0800 Subject: [PATCH] Scroll images in project issues separately from the remaining issue (#31683) (#31823) Backport #31683 by @SimonPistache 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. Co-authored-by: Simon Priet <105607989+SimonPistache@users.noreply.github.com> --- web_src/css/features/projects.css | 7 ++++++- 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 74e8222a34..0434e40c9f 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); -- 2.39.5