From 8e46efef9568a8f1671f30932a1d5d528b99eb5c 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.

---
Conflict resolution: none

(cherry picked from commit fe7c9416777243264e8482d3af29e30c2b671074)
---
 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 9d39306c8d..75bf4b59e7 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -78,7 +78,9 @@
 .card-attachment-images {
   display: inline-block;
   white-space: nowrap;
-  overflow: hidden;
+  overflow: scroll;
+  cursor: default;
+  scroll-snap-type: x mandatory;
   text-align: center;
 }
 
@@ -86,7 +88,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);

From 0764b7c18b801531441d224ec61c67c851b5bce4 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.
---
 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 75bf4b59e7..1401916e73 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -80,7 +80,6 @@
   white-space: nowrap;
   overflow: scroll;
   cursor: default;
-  scroll-snap-type: x mandatory;
   text-align: center;
 }
 
@@ -89,7 +88,6 @@
   max-height: 50px;
   border-radius: var(--border-radius);
   text-align: left;
-  scroll-snap-align: center;
   margin-right: 2px;
   aspect-ratio: 1;
 }