Fix timeline event layout overflow with long content by silverwind · Pull Request #36595 · go-gitea/gitea

silverwind · 2026-02-12T05:34:41Z

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:

After:

Convert timeline event items from float-based layout to flexbox so that long content (merge commits, force pushes, labels, branch names, etc.) wraps properly instead of overflowing into elements below. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove float, vertical-align and margin rules that are now redundant because timeline event items use flexbox layout with gap. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

wxiaoguang · 2026-02-12T05:52:30Z

There are more float abuses, but this shouldn't cause any other regressions.

It does break layouts, maybe not only one

wxiaoguang · 2026-02-12T05:54:48Z

There are more float abuses, but this shouldn't cause any other regressions.

It does break layouts, maybe not only one

Also #35888 (comment)

Add align-items: center to the event flex container to restore vertical centering of badge icons with text after the float-to-flex conversion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-12T05:58:11Z

centering fixed in d5ec9df

silverwind · 2026-02-12T06:04:12Z

No need for ad hominem. Sorry I can't check for 100 regressions at the the same time.

Remove rules targeting HTML structures that don't exist: octicon-comment in badges, commit-status-link in events, .text in .detail, and .segments in events. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The timeline-avatar uses position: absolute with no explicit top value. With the parent event now using align-items: center, the static position of absolutely positioned children shifts to center. Adding top: 0 pins the avatar to the top of the timeline item. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

wxiaoguang · 2026-02-12T06:12:25Z

No need for ad hominem. Sorry I can't check for 100 regressions at the the same time.

You mean it's fine to just write and commit untested code and leave the bug-fix work for other poor people?

The inline avatar inside event flex containers was vertically centered across all wrapped lines due to align-items: center on the parent. Use align-self: flex-start with height: 32px and inline-flex to keep the avatar aligned with the first line (username) while maintaining proper centering within the 32px line height for single-line events. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-12T06:43:18Z

No, I'm grateful for any regressions noticed. I will be more careful next time. All reported regressions are fixed now.

web_src/css/repo.css

Signed-off-by: silverwind <me@silverwind.io>

Copilot

Pull request overview

This PR fixes overflow/overlap issues in the PR/issue timeline when event rows contain long content, by replacing float-based alignment with a flexbox layout for timeline “event” rows (per #36580).

Changes:

Convert .repository.view.issue .comment-list .event rows from float/inline alignment to display: flex with wrapping.
Update timeline templates to use tw-ml-auto for right-aligned controls within the new flex layout.
Add a code-comments-list modifier class to keep review code-comment lists from being affected by the new flex layout.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
web_src/css/repo.css	Switch timeline event layout to flex/wrap and adjust related spacing/positioning rules.
templates/repo/issue/view_content/comments_delete_time.tmpl	Replace float-based right alignment with `tw-ml-auto` for the delete-time action.
templates/repo/issue/view_content/comments.tmpl	Adjust markup to fit the new flex layout (move `<del>` inside line span, add `code-comments-list`, replace float-right with `tw-ml-auto`).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

wxiaoguang

I don't know whether it is right. I will leave for the argument.

silverwind · 2026-02-13T03:52:09Z

I don't know whether it is right. I will leave for the argument.

Hmm no, that's seems not right, avatar and label must be aligned. I will fix that.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-13T04:58:36Z

Hmm no, that's seems not right, avatar and label must be aligned. I will fix that.

Fixed in 3e26fbe:

silverwind · 2026-02-13T05:02:52Z

Found another slight avatar vertical alignment regression on the review event avatar, checking

Remove `top: 0` from `.timeline-avatar` which caused regular comment avatars to be misaligned with the comment box arrow (bypassed 8px padding-top on timeline items). For the review avatar offset, switch from margin-top to explicit `top: 51px` positioning to precisely align with the comment box arrow regardless of static position/padding. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-13T05:29:00Z

Found another slight avatar vertical alignment regression on the review event avatar, checking

Fixed again in d30595e and verified everything again.

Suggested by lunny https://discord.com/channels/322538954119184384/323701541297192961/1472491165004726345

And we might could enable the feature that dissmissing all the previous reviews once a new commit pushed after it was approved or rejected.

This PR gets new changes after approval.

silverwind · 2026-02-18T03:19:45Z

please re-review.

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 12, 2026

github-actions bot added modifies/templates This PR modifies the template files modifies/frontend labels Feb 12, 2026

Move del inside comment-text-line span and simplify CSS selector

0606188

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind changed the title ~~Fix timeline event layout overflow with long content (#36580)~~ Fix timeline event layout overflow with long content Feb 12, 2026

Remove dead CSS properties after flex layout conversion

d8e41e4

Remove float, vertical-align and margin rules that are now redundant because timeline event items use flexbox layout with gap. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

wxiaoguang marked this pull request as draft February 12, 2026 05:52

Fix vertical centering regression in timeline events

d5ec9df

Add align-items: center to the event flex container to restore vertical centering of badge icons with text after the float-to-flex conversion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

This comment was marked as resolved.

Sign in to view

silverwind and others added 2 commits February 12, 2026 07:04

Remove dead CSS rules for timeline events

a155fd0

Remove rules targeting HTML structures that don't exist: octicon-comment in badges, commit-status-link in events, .text in .detail, and .segments in events. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind marked this pull request as ready for review February 12, 2026 06:43

Merge branch 'main' into fixfloat

51ef92e

silverwind commented Feb 12, 2026

View reviewed changes

web_src/css/repo.css Outdated Show resolved Hide resolved

Apply suggestion from @silverwind

e177bff

Signed-off-by: silverwind <me@silverwind.io>

silverwind requested a review from Copilot February 12, 2026 15:32

Copilot started reviewing on behalf of silverwind February 12, 2026 15:33 View session

Copilot AI reviewed Feb 12, 2026

View reviewed changes

lunny previously approved these changes Feb 12, 2026

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 12, 2026

wxiaoguang reviewed Feb 12, 2026

View reviewed changes

silverwind marked this pull request as draft February 13, 2026 03:52

Fix badge alignment with avatar in timeline events

3e26fbe

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind marked this pull request as ready for review February 13, 2026 07:23

Merge branch 'main' into fixfloat

94f9836

GiteaBot added lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Feb 15, 2026

Merge branch 'main' into fixfloat

8657fb8

lunny approved these changes Feb 18, 2026

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 18, 2026

Merge branch 'main' into fixfloat

5c3a1dc

Uh oh!

Comments

Conversation

silverwind commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Feb 12, 2026

Uh oh!

silverwind commented Feb 12, 2026

Uh oh!

This comment was marked as resolved.

silverwind commented Feb 12, 2026

Uh oh!

wxiaoguang commented Feb 12, 2026

Uh oh!

silverwind commented Feb 12, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

wxiaoguang left a comment

Choose a reason for hiding this comment

Uh oh!

silverwind commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Feb 13, 2026

Uh oh!

silverwind commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Feb 13, 2026

Uh oh!

silverwind commented Feb 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

silverwind commented Feb 12, 2026 •

edited

Loading

wxiaoguang commented Feb 12, 2026 •

edited

Loading

silverwind commented Feb 13, 2026 •

edited

Loading

silverwind commented Feb 13, 2026 •

edited

Loading