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 1/2] [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);

From 9ed7adcbf8a65d68a48bf7ad579ebf4902516a46 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Tue, 20 Aug 2024 16:01:43 +0200
Subject: [PATCH 2/2] [UI] Remove snapping for images on project cards

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 0764b7c18b801531441d224ec61c67c851b5bce4)
---
 web_src/css/features/projects.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index bfa70090b7..413ec9985a 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -81,7 +81,6 @@
   white-space: nowrap;
   overflow: scroll;
   cursor: default;
-  scroll-snap-type: x mandatory;
   text-align: center;
 }
 
@@ -90,7 +89,6 @@
   max-height: 50px;
   border-radius: var(--border-radius);
   text-align: left;
-  scroll-snap-align: center;
   margin-right: 2px;
   aspect-ratio: 1;
 }