Backport #31683 by @SimonPistache
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.
---
Issue #31667 is open to discussion as there should be room for
improvement.
Co-authored-by: Simon Priet <105607989+SimonPistache@users.noreply.github.com>
.card-attachment-images {
display: inline-block;
white-space: nowrap;
- overflow: hidden;
+ overflow: scroll;
+ cursor: default;
+ scroll-snap-type: x mandatory;
text-align: center;
}
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 {
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);