Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve flex-item overflow #31404

Closed
wants to merge 2 commits into from
Closed

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Jun 17, 2024

Previously, labels could not break onto multiple lines when overflowing. Fix this by adding a wrapper element that sets display: inline which as far as I'm aware is the only display mode that achieves such overflow. Also introduced a breakpoint at 600px where the item goes into column layout.

Diff: https://github.com/go-gitea/gitea/pull/31404/files?diff=unified&w=1

Desktop before/after:

Screenshot 2024-06-17 at 23 24 56 Screenshot 2024-06-17 at 23 24 43

Mobile before/after:

Screenshot 2024-06-17 at 23 25 49 Screenshot 2024-06-17 at 23 25 36

@pull-request-size pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Jun 17, 2024
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jun 17, 2024
@github-actions github-actions bot added the modifies/templates This PR modifies the template files label Jun 17, 2024
display: inline;
}
.flex-item-title-inline > * {
display: inline !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't look good to me.

  1. It introduces unclear style overriding game again.
  2. There could be "SVG/emoji" in the labels, so the "flex align item center" was done intentionally, but now I do not know whether "inline+vertical-align" works.

Copy link
Member Author

@silverwind silverwind Jun 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At minimum the children must be display: inline. Parent actually does not need it. Could maybe check if we can get both elements to naturally display: inline, e.g. span/a without any CSS that alters display.

@silverwind silverwind marked this pull request as draft June 17, 2024 22:55
@wxiaoguang
Copy link
Contributor

The UI should have been improved by always show assignees on right #33006

@wxiaoguang wxiaoguang added the issue/needs-feedback For bugs, we need more details. For features, the feature must be described in more detail label Dec 29, 2024
@silverwind
Copy link
Member Author

silverwind commented Jan 15, 2025

I'll close as this is outdated. There's still a wrapping bug left on current master where at certain widths, labels in the message flexbox go to a new line all at once instead of them breaking up into multiple lines.

@silverwind silverwind closed this Jan 15, 2025
@silverwind silverwind deleted the flex-item branch January 15, 2025 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/needs-feedback For bugs, we need more details. For features, the feature must be described in more detail lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. modifies/templates This PR modifies the template files size/M Denotes a PR that changes 30-99 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants