test/gitea-mirror
1
0
Fork 0
mirror of https://gitea.com/gitea/gitea-mirror.git synced 2026-03-20 03:40:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix timeline event layout overflow with long content (#36595)

Browse Source 
Fixes: https://github.com/go-gitea/gitea/issues/36580

Bug is caused by abuse of float layout, convert layout to flex to fix
it. There are more float abuses, but this shouldn't cause any other
regressions.

Before:

<img width="939" height="165" alt="Screenshot 2026-02-12 at 06 22 45"
src="https://github.com/user-attachments/assets/3e0aea82-d31e-4f4f-97d1-903b9f34de8d"
/>

After:

<img width="961" height="191" alt="image"
src="https://github.com/user-attachments/assets/b8fa64dc-594f-46a6-87e4-c20475e7d1e8"
/>

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
silverwind
2026-03-12 09:25:09 +01:00
committed by GitHub
parent 356f589f0b
commit 538ec6ae6e
3 changed files with 33 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web_src/css/repo.css
View File

@@ -465,7 +465,7 @@ td .commit-summary {
}
.repository.view.issue .comment-list .timeline-avatar-offset {
margin-top: 48px;
top: 51px;
}
.repository.view.issue .comment-list .timeline-item {
@@ -503,9 +503,8 @@ td .commit-summary {
border-radius: var(--border-radius-full);
display: flex;
flex-shrink: 0;
float: left;
margin-left: -33px;
margin-right: 8px;
margin-right: 4px;
color: var(--color-text);
align-items: center;
justify-content: center;
@@ -522,10 +521,6 @@ td .commit-summary {
padding: 3px;
}
.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment {
margin-top: 2px;
}
.repository.view.issue .comment-list .timeline-item.comment > .content {
margin-left: -16px;
}
@@ -534,7 +529,6 @@ td .commit-summary {
/* TODO: this "line-height" is not ideal (actually it is abused), many layouts depend on this magic value,
for example: alignment of the header arrow and the avatar, view PR commit list left icon layout, dismiss review with reason, etc */
line-height: 32px;
vertical-align: middle;
color: var(--color-text-light);
min-width: 0;
}
@@ -547,23 +541,12 @@ td .commit-summary {
color: inherit;
}
.repository.view.issue .comment-list .timeline-item .avatar-with-link + .comment-text-line {
margin-left: 0.25em;
}
.repository.view.issue .comment-list .timeline-item.commits-list {
padding-left: 15px;
padding-top: 0;
}
.repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
float: right;
margin-right: 8px;
margin-top: 4px;
}
.repository.view.issue .comment-list .timeline-item .comment-text-label {
vertical-align: middle;
border: 1px solid var(--color-light-border);
height: 26px;
margin: 4px 0; /* because this label is beside the comment line, which has "line-height: 34px" */
@@ -677,21 +660,35 @@ td .commit-summary {
.repository.view.issue .comment-list .event {
padding-left: 15px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.repository.view.issue .comment-list .event .detail {
margin-top: 4px;
.repository.view.issue .comment-list .event.code-comments-list {
display: block;
}
.repository.view.issue .comment-list .event > .badge {
align-self: flex-start;
}
.repository.view.issue .comment-list .event > .avatar-with-link {
align-self: flex-start;
height: 32px;
display: inline-flex;
align-items: center;
}
.repository.view.issue .comment-list .event > .comment-text-line {
flex: 1;
min-width: 0;
}
.repository.view.issue .comment-list .event > .detail {
margin-left: 15px;
}
.repository.view.issue .comment-list .event .detail .text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.repository.view.issue .comment-list .event .segments {
box-shadow: none;
width: 100%;
}
.repository.view.issue .ui.depending .item.is-closed .issue-dependency-title {