Project issues containing images overflow(-x) theirs columns

[SimonPistache]

Description

It is possible to insert images in issues as attachement. When such issues are displayed in Projects, the card often display some images on top of the issue. This is practical as it allow to peek issues by images and illustrations rather than reading titles.

Sometimes, images in cards are resized to fit in, and sometime they are full-sized.

Issue

However, sometime they are wider than the card, and overflow on the column containing the card (on the x axis).

• It display an horizontal scrollbar on the bottom of the column
• It move all cards of a column at once when scrolling horizontally
• It feel weird

Also, the images are overflowing the card while dragging it:

Suggestion

Make the images scrolls in the card instead:

• Scrollbars only in card having overflowing images
• Only scroll images in cards, not all cards of a column
• Scroll snap to the closest image
• Overlapping scrollbars on some OS and browsers (Windows 10<, Some Linux distros)
• Card properly framed while dragging

To create this effect I changed the following:

.issue-card {
  /* [...] */
  align-items:stretch;
}

.card-attachment-images {
  /* [...] */
  overflow:scroll;
  cursor: default;
  scroll-snap-type: x mandatory;
}

.card-attachment-images img {
  /* [...] */
  text-align: left;
  scroll-snap-align: center;
}

What do you think ?

Screenshots

Gitea Version

1.22.0

Can you reproduce the bug on the Gitea demo site?

No

Operating System

No response

Browser Version

Firefox 128

[yp05327]

Can you create a PR to fix it?
I have done something last year in #26561, but it is.... stopped.

[SimonPistache]

Can you create a PR to fix it? I have done something last year in #26561, but it is.... stopped.

I'll have a look this week, it should be possible to make something with both issues. To me toying with devtools is a thing, changing the source code is another level i'm not certain I have yet :)

[yp05327]

Never mind. If you want to, then just try it. You can ask for help at any time.

[SimonPistache]

Thanks for the support, i'll give it a shot then. 🙂

What about the idea? Having scrollbar on images on card is ok to all?

[yp05327]

I think it is not bad, so I suggested you to create a PR.
But I suggest adding some pictures like this: ▊
This may broke the vertical view I think.

[lunny]

Resolved by #31683