From 7d133488b771ed4964cbb912d107757bee62f7ca Mon Sep 17 00:00:00 2001
From: Simon Priet <105607989+SimonPistache@users.noreply.github.com>
Date: Tue, 13 Aug 2024 01:36:28 +0200
Subject: [PATCH] [PORT] Scroll images in project issues separately from the
 remaining issue (gitea#31683)

As discussed in https://github.com/go-gitea/gitea/issues/31667 &
https://github.com/go-gitea/gitea/issues/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.

---
Backport: #5029
Conflict resolution: none
Modification: Remove the snapping of the images on the projects cards, the images are way too small to notice that when scrolling you're being snapped to these images and when you do notice it, it doesn't make sense as you wouldn't expect it to be snapped.

(cherry picked from commit 8e46efef9568a8f1671f30932a1d5d528b99eb5c)
---
 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 5e2ec885a0..bfa70090b7 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -79,7 +79,9 @@
 .card-attachment-images {
   display: inline-block;
   white-space: nowrap;
-  overflow: hidden;
+  overflow: scroll;
+  cursor: default;
+  scroll-snap-type: x mandatory;
   text-align: center;
 }
 
@@ -87,7 +89,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 b9368df4f6..703a4eaa6b 100644
--- a/web_src/css/repo/issue-card.css
+++ b/web_src/css/repo/issue-card.css
@@ -1,7 +1,7 @@
 .issue-card {
   display: flex;
   flex-direction: column;
-  align-items: start;
+  align-items: stretch;
   border-radius: var(--border-radius);
   padding: 8px 10px;
   border: 1px solid var(--color-secondary);