foster/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-30 09:41:11 -05:00
Code Issues Wiki Activity

[PORT] Scroll images in project issues separately from the remaining issue (gitea#31683)

Browse source 
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.

---
Backport: #5029
Conflict resolution: none
Modification: 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.

(cherry picked from commit 8e46efef95)
This commit is contained in:
Simon Priet 2024-08-13 01:36:28 +02:00 committed by Gusted
parent a84730775a
commit 7d133488b7
No known key found for this signature in database
GPG key ID: FD821B732837125F
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web_src/css/features/projects.css
View file

@ -79,7 +79,9 @@
.card-attachment-images { .card-attachment-images {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: scroll;
cursor: default;
scroll-snap-type: x mandatory;
text-align: center; text-align: center;
} }
@ -87,7 +89,10 @@
display: inline-block; display: inline-block;
max-height: 50px; max-height: 50px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-align: left;
scroll-snap-align: center;
margin-right: 2px; margin-right: 2px;
aspect-ratio: 1;
} }
.card-attachment-images img:only-child { .card-attachment-images img:only-child {

2
web_src/css/repo/issue-card.css
View file

@ -1,7 +1,7 @@
.issue-card { .issue-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start; align-items: stretch;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 8px 10px; padding: 8px 10px;
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);