From 7c1eec3167ac6c2f97612aebc531874bdf76b9bb Mon Sep 17 00:00:00 2001
From: Simon <simon.priet@gmail.com>
Date: Tue, 23 Jul 2024 20:13:03 +0200
Subject: [PATCH 1/2] fix(#31667): fixes images in cards overflowing Projects
 columns

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 .
---
 web_src/css/features/projects.css | 14 ++++++++++----
 web_src/css/repo/issue-card.css   |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index 151b0a23d9dc7..d339fe6cd88f8 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -24,6 +24,7 @@
 
 .project-column .issue-card {
   color: var(--color-text);
+  align-items: stretch;
 }
 
 .project-column-header {
@@ -41,7 +42,7 @@
   flex: 1;
 }
 
-.project-column > .cards {
+.project-column>.cards {
   flex: 1;
   display: flex;
   align-content: baseline;
@@ -53,7 +54,7 @@
   gap: .25rem;
 }
 
-.project-column > .divider {
+.project-column>.divider {
   margin: 5px 0;
   border-color: currentcolor;
   opacity: .5;
@@ -70,7 +71,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 +81,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 {
@@ -94,4 +100,4 @@
 
 .card-ghost * {
   opacity: 0;
-}
+}
\ No newline at end of file
diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css
index 390bfb6a01419..c7e0bd71e2515 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);
@@ -37,4 +37,4 @@
   gap: 0.25em;
   justify-content: end;
   flex-wrap: wrap;
-}
+}
\ No newline at end of file

From 62cfcb765896c82c52c4872b1363bb9a467d0007 Mon Sep 17 00:00:00 2001
From: Simon <simon.priet@gmail.com>
Date: Wed, 24 Jul 2024 00:59:39 +0200
Subject: [PATCH 2/2] refactor(#31667): Remove linter cleanup

Remove changes originated from linter, as it introduced a lot of visual diff.
---
 web_src/css/features/projects.css | 7 +++----
 web_src/css/repo/issue-card.css   | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index d339fe6cd88f8..4a0205c910a33 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -24,7 +24,6 @@
 
 .project-column .issue-card {
   color: var(--color-text);
-  align-items: stretch;
 }
 
 .project-column-header {
@@ -42,7 +41,7 @@
   flex: 1;
 }
 
-.project-column>.cards {
+.project-column > .cards {
   flex: 1;
   display: flex;
   align-content: baseline;
@@ -54,7 +53,7 @@
   gap: .25rem;
 }
 
-.project-column>.divider {
+.project-column > .divider {
   margin: 5px 0;
   border-color: currentcolor;
   opacity: .5;
@@ -100,4 +99,4 @@
 
 .card-ghost * {
   opacity: 0;
-}
\ No newline at end of file
+}
diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css
index c7e0bd71e2515..fb832bd05ab0f 100644
--- a/web_src/css/repo/issue-card.css
+++ b/web_src/css/repo/issue-card.css
@@ -37,4 +37,4 @@
   gap: 0.25em;
   justify-content: end;
   flex-wrap: wrap;
-}
\ No newline at end of file
+}