Skip to content

Refactor "flex-list" to "flex-divided-list"#37505

Merged
wxiaoguang merged 5 commits into
go-gitea:mainfrom
wxiaoguang:refactor-flex-list
May 2, 2026
Merged

Refactor "flex-list" to "flex-divided-list"#37505
wxiaoguang merged 5 commits into
go-gitea:mainfrom
wxiaoguang:refactor-flex-list

Conversation

@wxiaoguang
Copy link
Copy Markdown
Contributor

@wxiaoguang wxiaoguang commented May 2, 2026 •
edited
Loading

Purpose:

  1. Make the whole code base have unified "item" layout
  2. Clarify our "list" styles: "flex-relaxed-list", "flex-divided-list"
  3. Prepare to replace legacy "ui relaxed list"
  4. Prepare for refactoring the "pull merge box", it needs the "flex-divided-list"
  5. Fix legacy abuses of "flex-list", e.g.: repo home sidebar

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label May 2, 2026
@wxiaoguang
Copy link
Copy Markdown
Contributor Author

wxiaoguang commented May 2, 2026 •
edited
Loading

I have tested most related changes.

And such style change should be safe to end users, at the worst, some UI misalignments which can be easily fixed.

I will fix all related bugs in first time.

Screenshots:

Details image image image

@wxiaoguang wxiaoguang requested a review from Copilot May 2, 2026 09:14
Copilot AI reviewed May 2, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR standardizes “list item” layout across the UI by replacing legacy flex-list/flex-item usage with the new flex-divided-list / flex-relaxed-list patterns and the items-with-main item structure, helping clarify list styling and preparing for further UI refactors.

Changes:

  • Introduces/expands shared CSS helpers for flex-relaxed-list, flex-divided-list, and items-with-main with item-leading/item-main/item-trailing.
  • Migrates many templates from flex-list/flex-item-* classes to flex-divided-list/item-*, and updates related selectors in CSS and tests.
  • Moves repo header styling (previously in web_src/css/repo/header.css) into web_src/css/repo.css and updates the header template markup accordingly.

Reviewed changes

Copilot reviewed 54 out of 54 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
web_src/js/features/repo-settings-branches.test.ts Updates test fixture HTML to use .item nodes for sortable protected-branch rows.
web_src/css/shared/flex-list.css Refactors list helpers into flex-relaxed-list / flex-divided-list and items-with-main item structure.
web_src/css/repo/issue-list.css Adjusts issue list styling selectors to match new .item-body / .branches structure.
web_src/css/repo/home.css Adds sidebar header styling and tweaks language stats spacing.
web_src/css/repo/header.css Removes repo header CSS (moved elsewhere).
web_src/css/repo.css Adds repo header spacing and secondary-info styling.
web_src/css/index.css Drops import for removed repo/header.css.
web_src/css/base.css Removes flex-relaxed-list definition from base (now in shared flex-list stylesheet).
web_src/css/actions.css Updates run list trailing selector to .item-trailing.
tests/integration/repo_fork_test.go Updates fork list selectors from .flex-item to .item.
tests/integration/privateactivity_test.go Updates activity feed selector from .flex-item to .item.
tests/integration/issue_test.go Updates issue list selector from .flex-item to .item.
tests/integration/auth_ldap_test.go Updates SSH keys DOM selectors to .item / .item-body.
tests/e2e/issue-project.test.ts Updates Playwright selectors for issue list items to .item.
templates/user/settings/security/webauthn.tmpl Migrates WebAuthn credential list to new list/item classes.
templates/user/settings/security/openid.tmpl Migrates OpenID list to new list/item classes.
templates/user/settings/security/accountlinks.tmpl Migrates account link list to new list/item classes.
templates/user/settings/organization.tmpl Migrates org list to new list/item classes.
templates/user/settings/keys_ssh.tmpl Migrates SSH key list to new list/item classes.
templates/user/settings/keys_principal.tmpl Migrates principal key list to new list/item classes.
templates/user/settings/keys_gpg.tmpl Migrates GPG key list to new list/item classes.
templates/user/settings/grants_oauth2.tmpl Migrates OAuth2 grants list to new list/item classes.
templates/user/settings/applications_oauth2_list.tmpl Migrates OAuth2 app list to new list/item classes.
templates/user/settings/applications.tmpl Migrates access token list to new list/item classes.
templates/user/dashboard/feeds.tmpl Migrates dashboard activity feed to new list/item classes.
templates/shared/variables/variable_list.tmpl Migrates variable list to new list/item classes.
templates/shared/user/blocked_users.tmpl Migrates blocked user list to new list/item classes.
templates/shared/secrets/add_list.tmpl Migrates secrets list to new list/item classes.
templates/shared/repo/list.tmpl Migrates shared repo list template to new list/item classes (affects forks/explore/etc).
templates/shared/issuelist.tmpl Migrates shared issue list template to new list/item classes.
templates/repo/settings/options.tmpl Migrates repo danger-zone list to new list/item classes.
templates/repo/settings/deploy_keys.tmpl Migrates deploy keys list to new list/item classes.
templates/repo/settings/collaboration.tmpl Migrates collaborators/teams lists to new list/item classes.
templates/repo/settings/branches.tmpl Migrates protected branches list to new list/item classes for sortable support.
templates/repo/settings/actions_general.tmpl Migrates collaborative owners list to new list/item classes.
templates/repo/home_sidebar_top.tmpl Refactors repo home sidebar top layout using flex-relaxed-list and new headers.
templates/repo/home_sidebar_bottom.tmpl Refactors repo home sidebar bottom layout using flex-relaxed-list and dividers.
templates/repo/header.tmpl Refactors repo header markup to use flex-left-right + new secondary info styling.
templates/repo/actions/runs_list.tmpl Migrates Actions runs list to new list/item classes.
templates/package/shared/versionlist.tmpl Migrates package version list to new list/item classes.
templates/package/shared/list.tmpl Migrates package list to new list/item classes.
templates/package/shared/cleanup_rules/list.tmpl Migrates cleanup rules list to new list/item classes.
templates/package/settings.tmpl Migrates package danger-zone list to new list/item classes.
templates/org/team/repositories.tmpl Migrates team repo list to new list/item classes.
templates/org/team/members.tmpl Migrates team member list to new list/item classes (but see review comment about remaining legacy class).
templates/org/settings/options_dangerzone.tmpl Migrates org danger-zone list to new list/item classes.
templates/org/member/members.tmpl Migrates org member list to new list/item classes.
templates/explore/user_list.tmpl Migrates explore user list to new list/item classes.
templates/devtest/fomantic-dropdown.tmpl Updates devtest copy text referencing old class naming.
templates/devtest/flex-list.tmpl Updates devtest fixture to new list/item classes and container scenarios.
templates/admin/user/view_emails.tmpl Migrates admin user emails list to new list/item classes.
templates/admin/user/view_details.tmpl Migrates admin user details “list” layout to new list/item classes.
templates/admin/badge/view.tmpl Migrates admin badge view layout to new list/item classes.
templates/admin/badge/users.tmpl Migrates admin badge users list to new list/item classes.

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

Comment thread templates/org/team/members.tmpl Outdated
Comment thread templates/repo/header.tmpl Outdated
@wxiaoguang wxiaoguang force-pushed the refactor-flex-list branch from 6285f9e to 6f7ec85 Compare May 2, 2026 09:24
bircni
bircni approved these changes May 2, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@bircni bircni left a comment

Choose a reason for hiding this comment

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

Good refactor

@GiteaBot 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 May 2, 2026
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels May 2, 2026
@wxiaoguang wxiaoguang enabled auto-merge (squash) May 2, 2026 15:48
@wxiaoguang wxiaoguang merged commit 134e86c into go-gitea:main May 2, 2026
22 checks passed
@GiteaBot GiteaBot added this to the 1.27.0 milestone May 2, 2026
@wxiaoguang wxiaoguang deleted the refactor-flex-list branch May 2, 2026 16:11
@lunny lunny added the type/refactoring Existing code has been cleaned up. There should be no new functionality. label May 2, 2026
silverwind added a commit to McMichalK/gitea that referenced this pull request May 5, 2026
@silverwind
Merge remote-tracking branch 'origin/main' into filter-by-file-extension
9c8cf2a 
* origin/main: (49 commits)
  ci: lint PR titles with commitlint (go-gitea#37498)
  Make ServeSetHeaders default to download attachment if filename exists (go-gitea#37552)
  fix(actions): validate workflow param to prevent 500 error (go-gitea#37546)
  Fix various problems (go-gitea#37547)
  docs: fix 4 typos in CHANGELOG.md (go-gitea#37549)
  [skip ci] Updated translations via Crowdin
  chore(deps): update action dependencies (go-gitea#37540)
  fix: Fix `nolyfill` for renovate (go-gitea#37537)
  Refactor pull request view (7) (go-gitea#37524)
  Update go js py dependencies (go-gitea#37525)
  Don't unblock run-level-concurrency-blocked runs in the resolver (go-gitea#37461)
  Refactor pull request view (6) (go-gitea#37522)
  Refactor pull request view (5) (go-gitea#37517)
  fix: persist mirror repository metadata (go-gitea#37519)
  fix(packages): use file names for generic web downloads (go-gitea#37514)
  fix: merge autodetect can't close other PRs but only the last one when multiple PRs are pushed at once (go-gitea#37512)
  Fix update branch protection order (go-gitea#37508)
  Refactor "flex-list" to "flex-divided-list" (go-gitea#37505)
  fix: redirect early CLI console logger to stderr (go-gitea#37507)
  Fix mCaptcha broken after Vite migration (go-gitea#37492)
  ...

# Conflicts:
#	templates/repo/diff/box.tmpl
zjjhot added a commit to zjjhot/gitea that referenced this pull request May 6, 2026
@zjjhot
Merge branch 'main' into mainzjj
7a4c3ea 
* main: (36 commits)
  refactor(deps): migrate from `nektos/act` fork to `gitea/runner` (go-gitea#37557)
  ci: lint PR titles with commitlint (go-gitea#37498)
  Make ServeSetHeaders default to download attachment if filename exists (go-gitea#37552)
  fix(actions): validate workflow param to prevent 500 error (go-gitea#37546)
  Fix various problems (go-gitea#37547)
  docs: fix 4 typos in CHANGELOG.md (go-gitea#37549)
  [skip ci] Updated translations via Crowdin
  chore(deps): update action dependencies (go-gitea#37540)
  fix: Fix `nolyfill` for renovate (go-gitea#37537)
  Refactor pull request view (7) (go-gitea#37524)
  Update go js py dependencies (go-gitea#37525)
  Don't unblock run-level-concurrency-blocked runs in the resolver (go-gitea#37461)
  Refactor pull request view (6) (go-gitea#37522)
  Refactor pull request view (5) (go-gitea#37517)
  fix: persist mirror repository metadata (go-gitea#37519)
  fix(packages): use file names for generic web downloads (go-gitea#37514)
  fix: merge autodetect can't close other PRs but only the last one when multiple PRs are pushed at once (go-gitea#37512)
  Fix update branch protection order (go-gitea#37508)
  Refactor "flex-list" to "flex-divided-list" (go-gitea#37505)
  fix: redirect early CLI console logger to stderr (go-gitea#37507)
  ...
@lunny
Copy link
Copy Markdown
Member

lunny commented May 6, 2026

There is a bug here #37569

@wxiaoguang
Copy link
Copy Markdown
Contributor Author

wxiaoguang commented May 6, 2026

There is a bug here #37569

Fixed on main branch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@lunny lunny lunny approved these changes

@bircni bircni bircni approved these changes

Assignees

No one assigned

Labels

lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. type/refactoring Existing code has been cleaned up. There should be no new functionality.

Projects

None yet

Milestone

1.27.0

Development

Successfully merging this pull request may close these issues.

5 participants

@wxiaoguang @lunny @bircni @GiteaBot