fix(go-gitea#31667): fixes images in cards overflowing Projects columns

As discussed in go-gitea#31667 & go-gitea#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 .

Author: SimonPistache

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,15 +71,20 @@
 .card-attachment-images {
   display: inline-block;
   white-space: nowrap;
-  overflow: hidden;
+  overflow: scroll;
+  cursor: default;
+  scroll-snap-type: x mandatory;
   text-align: center;
 }
 
 .card-attachment-images img {
   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;
-}
+}

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;
-}
+}