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

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"
* https://github.com/go-gitea/gitea/pull/37445#discussion_r3144458865
4. Prepare for refactoring the "pull merge box", it needs the
"flex-divided-list"
    * related to "Refactor pull request view (*)" like #37451
5. Fix legacy abuses of "flex-list", e.g.: repo home sidebar

templates/admin/badge/users.tmpl

@@ -13,18 +13,18 @@
 		</div>
 		{{if .Users}}
 		<div class="ui attached segment">
-			<div class="flex-list">
+			<div class="flex-divided-list items-with-main">
 				{{range .Users}}
-					<div class="flex-item tw-items-center">
-						<div class="flex-item-leading">
+					<div class="item tw-items-center">
+						<div class="item-leading">
 							<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 						</div>
-						<div class="flex-item-main">
-							<div class="flex-item-title">
+						<div class="item-main">
+							<div class="item-title">
 								{{template "shared/user/name" .}}
 							</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<a class="ui red tiny button inline link-action" data-url="{{$.Link}}/delete?id={{.ID}}" data-modal-confirm="{{ctx.Locale.Tr "admin.badges.delete_user_desc"}}">
 								{{ctx.Locale.Tr "admin.badges.remove_user"}}
 							</a>

templates/admin/badge/view.tmpl

@@ -10,18 +10,18 @@
 				</div>
 			</h4>
 			<div class="ui attached segment">
-				<div class="flex-list">
-					<div class="flex-item">
+				<div class="flex-divided-list items-with-main">
+					<div class="item">
 						{{if .Badge.ImageURL}}
-						<div class="flex-item-leading">
+						<div class="item-leading">
 							<img width="64" height="64" src="{{.Badge.ImageURL}}" alt="{{.Badge.Description}}" data-tooltip-content="{{.Badge.Description}}">
 						</div>
 						{{end}}
-						<div class="flex-item-main">
-							<div class="flex-item-title">
+						<div class="item-main">
+							<div class="item-title">
 								{{.Badge.Slug}}
 							</div>
-							<div class="flex-item-body">
+							<div class="item-body">
 								{{.Badge.Description}}
 							</div>
 						</div>

templates/admin/user/view_details.tmpl

@@ -1,10 +1,10 @@
-<div class="flex-list">
-	<div class="flex-item">
-		<div class="flex-item-leading">
+<div class="flex-divided-list items-with-main">
+	<div class="item">
+		<div class="item-leading">
 			{{ctx.AvatarUtils.Avatar .User 48}}
 		</div>
-		<div class="flex-item-main">
-			<div class="flex-item-title">
+		<div class="item-main">
+			<div class="item-title">
 				{{template "shared/user/name" .User}}
 				{{if .User.IsAdmin}}
 					<span class="ui basic label">{{ctx.Locale.Tr "admin.users.admin"}}</span>
@@ -13,34 +13,34 @@
 					<span class="ui basic label">{{ctx.Locale.Tr "admin.users.bot"}}</span>
 				{{end}}
 			</div>
-			<div class="flex-item-body">
+			<div class="item-body">
 				<b>{{ctx.Locale.Tr "admin.users.auth_source"}}:</b>
 				{{Iif (eq .LoginSource.ID 0) (ctx.Locale.Tr "admin.users.local") .LoginSource.Name}}
 			</div>
-			<div class="flex-item-body">
+			<div class="item-body">
 				<b>{{ctx.Locale.Tr "admin.users.activated"}}:</b>
 				{{svg (Iif .User.IsActive "octicon-check" "octicon-x")}}
 			</div>
-			<div class="flex-item-body">
+			<div class="item-body">
 				<b>{{ctx.Locale.Tr "admin.users.prohibit_login"}}:</b>
 				{{svg (Iif .User.ProhibitLogin "octicon-check" "octicon-x")}}
 			</div>
-			<div class="flex-item-body">
+			<div class="item-body">
 				<b>{{ctx.Locale.Tr "admin.users.restricted"}}:</b>
 				{{svg (Iif .User.IsRestricted "octicon-check" "octicon-x")}}
 			</div>
-			<div class="flex-item-body">
+			<div class="item-body">
 				<b>{{ctx.Locale.Tr "settings.visibility"}}:</b>
 				{{if .User.Visibility.IsPublic}}{{ctx.Locale.Tr "settings.visibility.public"}}{{end}}
 				{{if .User.Visibility.IsLimited}}{{ctx.Locale.Tr "settings.visibility.limited"}}{{end}}
 				{{if .User.Visibility.IsPrivate}}{{ctx.Locale.Tr "settings.visibility.private"}}{{end}}
 			</div>
-			<div class="flex-item-body">
+			<div class="item-body">
 				<b>{{ctx.Locale.Tr "admin.users.2fa"}}:</b>
 				{{svg (Iif .TwoFactorEnabled "octicon-check" "octicon-x")}}
 			</div>
 			{{if .User.Language}}
-				<div class="flex-item-body">
+				<div class="item-body">
 					<span class="flex-text-inline">
 						<b>{{ctx.Locale.Tr "settings.language"}}:</b>
 						{{range .AllLangs}}{{if eq $.User.Language .Lang}}{{.Name}}{{end}}{{end}}
@@ -48,12 +48,12 @@
 				</div>
 			{{end}}
 			{{if .User.Location}}
-				<div class="flex-item-body">
+				<div class="item-body">
 					<span class="flex-text-inline">{{svg "octicon-location"}}{{.User.Location}}</span>
 				</div>
 			{{end}}
 			{{if .User.Website}}
-				<div class="flex-item-body">
+				<div class="item-body">
 					<span class="flex-text-inline">
 						{{svg "octicon-link"}}
 						<a target="_blank" href="{{.User.Website}}">{{.User.Website}}</a>

templates/admin/user/view_emails.tmpl

@@ -1,7 +1,7 @@
-<div class="flex-list">
+<div class="flex-divided-list items-with-main">
 	{{range .Emails}}
-		<div class="flex-item">
-			<div class="flex-item-main">
+		<div class="item">
+			<div class="item-main">
 				<div class="flex-text-block">
 					<a href="mailto:{{.Email}}">{{.Email}}</a>
 					{{if .IsPrimary}}

templates/devtest/flex-list.tmpl

@@ -1,28 +1,28 @@
 {{template "devtest/devtest-header"}}
 <div class="page-content devtest">
 	<div class="ui container">
-		<h1>Flex List (standalone)</h1>
+		<h3>Flex List (standalone)</h3>
 		<div class="divider"></div>
-		<div class="flex-list">
-			<div class="flex-item">
-				<div class="flex-item-leading">
+		<div class="flex-divided-list items-with-main">
+			<div class="item">
+				<div class="item-leading">
 					{{svg "octicon-info" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">
+				<div class="item-main">
+					<div class="item-title">
 						Flex Item
 						<span class="ui basic label">
 							with label
 						</span>
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						consists of leading/main/trailing part
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						main part contains title and (multiple) body lines
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui tiny red button">
 						{{svg "octicon-alert" 14}} CJK文本测试
 					</button>
@@ -35,42 +35,42 @@
 				</div>
 			</div>
 
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{svg "octicon-info" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">
+				<div class="item-main">
+					<div class="item-title">
 						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						consists of leading/main/trailing part
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
 						<span class="tw-inline-block tw-truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui tiny red button">
 						{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
 					</button>
 				</div>
 			</div>
 
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{svg "octicon-repo" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-header">
-						<div class="flex-item-title">
+				<div class="item-main">
+					<div class="item-header">
+						<div class="item-title">
 							<a class="tw-text-primary" href="{{$.Link}}">
 								gitea-org / gitea
 							</a>
 							<span class="flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<a class="muted" href="{{$.Link}}">
 								<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
 							</a>
@@ -78,7 +78,7 @@
 							<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
 						</div>
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						when inside header, the trailing part will wrap below the title
 					</div>
 				</div>
@@ -87,27 +87,48 @@
 
 		<div class="divider"></div>
 
-		<h1>Flex List (with "ui segment")</h1>
+		<h3>Flex List (with "ui segment")</h3>
 		<div class="ui attached segment">
-			<div class="flex-list">
-				<div class="flex-item">item 1</div>
-				<div class="flex-item">item 2</div>
+			<div class="flex-divided-list">
+				<div class="item">item 1</div>
+				<div class="item">item 2</div>
 			</div>
 		</div>
 		<div class="ui attached segment">
-			<h1>Flex List (with "ui segment")</h1>
-			<div class="flex-list">
-				<div class="flex-item">item 1</div>
-				<div class="flex-item">item 2</div>
+			<h4>segment header</h4>
+			<div class="flex-divided-list">
+				<div class="item">item 1</div>
+				<div class="item">item 2</div>
+			</div>
+		</div>
+		<h3>Flex List (with "ui segment fitted")</h3>
+		<div class="ui attached segment fitted">
+			<div class="flex-divided-list">
+				<div class="item">item 1</div>
+				<div class="item">item 2</div>
 			</div>
 		</div>
 
-		<h1>If parent provides the padding/margin space:</h1>
-		<div class="tw-border tw-border-secondary tw-py-4">
-			<div class="flex-list flex-space-fitted">
-				<div class="flex-item">item 1 (no padding top)</div>
-				<div class="flex-item">item 2 (no padding bottom)</div>
+		<h3>If parent provides border or padding:</h3>
+		<div class="container-segmented tw-border tw-border-secondary">
+			<div class="tw-m-3">before divider</div>
+			<div class="divider"></div>
+			<div class="flex-divided-list">
+				<div class="item">item 1</div>
+				<div class="item">item 2</div>
 			</div>
+			<div class="divider"></div>
+			<div class="tw-m-3">after divider</div>
+		</div>
+		<div class="container-padded tw-border tw-border-secondary tw-p-4 tw-my-2">
+			<div>before divider</div>
+			<div class="divider"></div>
+			<div class="flex-divided-list">
+				<div class="item">item 1</div>
+				<div class="item">item 2</div>
+			</div>
+			<div class="divider"></div>
+			<div>after divider</div>
 		</div>
 	</div>
 </div>

templates/devtest/fomantic-dropdown.tmpl

@@ -4,7 +4,7 @@
 		<h2>Dropdown</h2>
 		<div>
 			<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
-				<span class="text">search-input &amp; flex-item in menu</span>
+				<span class="text">search-input &amp; flexed items in menu</span>
 				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				<div class="menu flex-items-menu">
 					<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>

templates/explore/user_list.tmpl

@@ -1,17 +1,17 @@
-<div class="flex-list">
+<div class="flex-divided-list items-with-main">
 	{{range .Users}}
-		<div class="flex-item tw-items-center">
-			<div class="flex-item-leading">
+		<div class="item tw-items-center">
+			<div class="item-leading">
 				{{ctx.AvatarUtils.Avatar . 48}}
 			</div>
-			<div class="flex-item-main">
-				<div class="flex-item-title">
+			<div class="item-main">
+				<div class="item-title">
 					{{template "shared/user/name" .}}
 					{{if .Visibility.IsPrivate}}
 						<span class="ui basic tiny label">{{ctx.Locale.Tr "repo.desc.private"}}</span>
 					{{end}}
 				</div>
-				<div class="flex-item-body">
+				<div class="item-body">
 					{{if .Location}}
 						<span class="flex-text-inline">{{svg "octicon-location"}}{{.Location}}</span>
 					{{end}}
@@ -26,7 +26,7 @@
 			</div>
 		</div>
 	{{else}}
-		<div class="flex-item">
+		<div class="item">
 			{{ctx.Locale.Tr "search.no_results"}}
 		</div>
 	{{end}}

templates/org/member/members.tmpl

@@ -11,15 +11,15 @@
 			</div>
 			<div class="divider"></div>
 		{{end}}
-		<div class="flex-list">
+		<div class="flex-divided-list items-with-main">
 			{{range .Members}}
 				{{$isPublic := index $.MembersIsPublicMember .ID}}
-				<div class="flex-item {{if $.PublicOnly}}tw-items-center{{end}}">
-					<div class="flex-item-leading">
+				<div class="item {{if $.PublicOnly}}tw-items-center{{end}}">
+					<div class="item-leading">
 						<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 48}}</a>
 					</div>
-					<div class="flex-item-main">
-						<div class="flex-item-title">
+					<div class="item-main">
+						<div class="item-title">
 							{{template "shared/user/name" .}}
 							{{if not $isPublic}}
 								<span class="ui basic small label">{{ctx.Locale.Tr "org.members.private"}}</span>
@@ -44,7 +44,7 @@
 							{{end}}
 						</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						{{if or (eq $.SignedUser.ID .ID) $.IsOrganizationOwner}}
 							{{if $isPublic}}
 								<a class="ui tiny button link-action" href data-url="{{$.OrgLink}}/members/action/private?uid={{.ID}}">{{svg "octicon-eye-closed" 12 "icon"}}{{ctx.Locale.Tr "org.members.public_helper"}}</a>

templates/org/settings/options_dangerzone.tmpl

@@ -2,33 +2,33 @@
 	{{ctx.Locale.Tr "repo.settings.danger_zone"}}
 </h4>
 <div class="ui attached error danger segment">
-	<div class="flex-list">
-		<div class="flex-item tw-items-center">
-			<div class="flex-item-main">
-				<div class="flex-item-title">{{ctx.Locale.Tr "org.settings.visibility"}}</div>
-				<div class="flex-item-body">{{ctx.Locale.Tr "org.settings.visibility_desc"}}</div>
+	<div class="flex-divided-list items-with-main">
+		<div class="item tw-items-center">
+			<div class="item-main">
+				<div class="item-title">{{ctx.Locale.Tr "org.settings.visibility"}}</div>
+				<div class="item-body">{{ctx.Locale.Tr "org.settings.visibility_desc"}}</div>
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				<button class="ui basic red show-modal button" data-modal="#change-visibility-org-modal">{{ctx.Locale.Tr "org.settings.change_visibility"}}</button>
 			</div>
 		</div>
 
-		<div class="flex-item tw-items-center">
-			<div class="flex-item-main">
-				<div class="flex-item-title">{{ctx.Locale.Tr "org.settings.rename"}}</div>
-				<div class="flex-item-body">{{ctx.Locale.Tr "org.settings.rename_desc"}}</div>
+		<div class="item tw-items-center">
+			<div class="item-main">
+				<div class="item-title">{{ctx.Locale.Tr "org.settings.rename"}}</div>
+				<div class="item-body">{{ctx.Locale.Tr "org.settings.rename_desc"}}</div>
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				<button class="ui basic red show-modal button" data-modal="#rename-org-modal">{{ctx.Locale.Tr "org.settings.rename"}}</button>
 			</div>
 		</div>
 
-		<div class="flex-item">
-			<div class="flex-item-main">
-				<div class="flex-item-title">{{ctx.Locale.Tr "org.settings.delete_account"}}</div>
-				<div class="flex-item-body">{{ctx.Locale.Tr "org.settings.delete_prompt"}}</div>
+		<div class="item">
+			<div class="item-main">
+				<div class="item-title">{{ctx.Locale.Tr "org.settings.delete_account"}}</div>
+				<div class="item-body">{{ctx.Locale.Tr "org.settings.delete_prompt"}}</div>
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				<button class="ui basic red show-modal button" data-modal="#delete-org-modal">{{ctx.Locale.Tr "org.settings.delete_account"}}</button>
 			</div>
 		</div>

templates/org/team/members.tmpl

@@ -21,18 +21,18 @@
 					</div>
 				{{end}}
 				<div class="ui{{if not .IsOrganizationOwner}} top{{end}} attached segment">
-					<div class="flex-list">
-						{{range .Team.Members}}
-							<div class="flex-item tw-items-center">
-								<div class="flex-item-leading">
+								<div class="flex-divided-list items-with-main">
+										{{range .Team.Members}}
+											<div class="item tw-items-center">
+								<div class="item-leading">
 									<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 								</div>
-								<div class="flex-item-main">
-									<div class="flex-item-title">
+								<div class="item-main">
+									<div class="item-title">
 										{{template "shared/user/name" .}}
 									</div>
 								</div>
-								<div class="flex-item-trailing">
+								<div class="item-trailing">
 									{{if and $.IsOrganizationOwner (not (and ($.Team.IsOwnerTeam) (eq (len $.Team.Members) 1)))}}
 										<form>
 											<button class="ui red button delete-button" data-modal-id="remove-team-member"
@@ -44,7 +44,7 @@
 								</div>
 							</div>
 						{{else}}
-							<div class="flex-item">
+							<div class="item">
 								<span class="tw-text-text-light tw-italic">{{ctx.Locale.Tr "org.teams.members.none"}}</span>
 							</div>
 						{{end}}
@@ -53,13 +53,13 @@
 				{{if and .Invites $.IsOrganizationOwner}}
 				<h4 class="ui top attached header">{{ctx.Locale.Tr "org.teams.invite_team_member.list"}}</h4>
 				<div class="ui attached segment">
-					<div class="flex-list">
+					<div class="flex-divided-list items-with-main">
 						{{range .Invites}}
-							<div class="flex-item tw-items-center">
-								<div class="flex-item-main">
+							<div class="item tw-items-center">
+								<div class="item-main">
 									{{.Email}}
 								</div>
-								<div class="flex-item-trailing">
+								<div class="item-trailing">
 									<form action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove_invite" method="post">
 										<input type="hidden" name="iid" value="{{.ID}}">
 										<button class="ui red button">{{ctx.Locale.Tr "org.members.remove"}}</button>

templates/org/team/repositories.tmpl

@@ -31,18 +31,18 @@
 					<div class="ui top attached segment">{{ctx.Locale.Tr "org.teams.all_repositories"}}</div>
 				{{end}}
 				<div class="ui {{if not $hasTopAttachedSegment}}top{{end}} attached segment">
-					<div class="flex-list">
+					<div class="flex-divided-list items-with-main">
 						{{range $.TeamRepos}}
-							<div class="flex-item tw-items-center">
-								<div class="flex-item-leading">
+							<div class="item tw-items-center">
+								<div class="item-leading">
 									{{template "repo/icon" .}}
 								</div>
-								<div class="flex-item-main">
-									<a class="flex-item-title tw-text-primary" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}">
+								<div class="item-main">
+									<a class="item-title tw-text-primary" href="{{$.Org.HomeLink}}/{{.Name | PathEscape}}">
 										{{$.Org.Name}}/{{.Name}}
 									</a>
 								</div>
-								<div class="flex-item-trailing">
+								<div class="item-trailing">
 									{{if $canAddRemove}}
 										<form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove">
 											<button type="submit" class="ui red small button" name="repoid" value="{{.ID}}">{{ctx.Locale.Tr "remove"}}</button>
@@ -51,7 +51,7 @@
 								</div>
 							</div>
 						{{else}}
-							<div class="flex-item">
+							<div class="item">
 								<span class="tw-text-text-light tw-italic">{{ctx.Locale.Tr "org.teams.repos.none"}}</span>
 							</div>
 						{{end}}

templates/package/settings.tmpl

@@ -30,13 +30,13 @@
 			{{ctx.Locale.Tr "repo.settings.danger_zone"}}
 		</h4>
 		<div class="ui attached error danger segment">
-			<div class="flex-list">
-				<div class="flex-item">
-					<div class="flex-item-main">
-						<div class="flex-item-title">{{ctx.Locale.Tr "packages.settings.delete"}}</div>
-						<div class="flex-item-body">{{ctx.Locale.Tr "packages.settings.delete.description"}}</div>
+			<div class="flex-divided-list items-with-main">
+				<div class="item">
+					<div class="item-main">
+						<div class="item-title">{{ctx.Locale.Tr "packages.settings.delete"}}</div>
+						<div class="item-body">{{ctx.Locale.Tr "packages.settings.delete.description"}}</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						<button class="ui basic red show-modal button" data-modal="#delete-package-modal">{{ctx.Locale.Tr "packages.settings.delete"}}</button>
 					</div>
 					<div class="ui tiny modal" id="delete-package-modal">

templates/package/shared/cleanup_rules/list.tmpl

@@ -5,41 +5,41 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="flex-list">
+	<div class="flex-divided-list items-with-main">
 		{{range .CleanupRules}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{svg .Type.SVGName 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">
+				<div class="item-main">
+					<div class="item-title">
 						<a class="item" href="{{$.Link}}/rules/{{.ID}}">{{.Type.Name}}</a>
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{if .Enabled}}{{ctx.Locale.Tr "enabled"}}{{else}}{{ctx.Locale.Tr "disabled"}}{{end}}</i>
 					</div>
 					{{if .KeepCount}}
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.count"}}:</i> {{if eq .KeepCount 1}}{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.count.1"}}{{else}}{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.count.n" .KeepCount}}{{end}}
 					</div>
 					{{end}}
 					{{if .KeepPattern}}
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.keep.pattern"}}:</i> {{StringUtils.EllipsisString .KeepPattern 100}}
 					</div>
 					{{end}}
 					{{if .RemoveDays}}
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.remove.days"}}:</i> {{ctx.Locale.Tr "tool.days" .RemoveDays}}
 					</div>
 					{{end}}
 					{{if .RemovePattern}}
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "packages.owner.settings.cleanuprules.remove.pattern"}}:</i> {{StringUtils.EllipsisString .RemovePattern 100}}
 					</div>
 					{{end}}
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<div class="ui dropdown tiny basic button">
 						{{svg "octicon-kebab-horizontal"}}
 						<div class="menu">

templates/package/shared/list.tmpl

@@ -16,14 +16,14 @@
 {{end}}
 <div>
 	{{range .PackageDescriptors}}
-	<div class="flex-list">
-		<div class="flex-item">
-			<div class="flex-item-main">
-				<div class="flex-item-title">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
+			<div class="item-main">
+				<div class="item-title">
 					<a href="{{.VersionWebLink}}">{{.Package.Name}}</a>
 					<span class="ui label">{{svg .Package.Type.SVGName 16}} {{.Package.Type.Name}}</span>
 				</div>
-				<div class="flex-item-body">
+				<div class="item-body">
 					{{$timeStr := DateUtils.TimeSince .Version.CreatedUnix}}
 					{{$hasRepositoryAccess := false}}
 					{{if .Repository}}

templates/package/shared/versionlist.tmpl

@@ -20,11 +20,11 @@
 </form>
 <div>
 	{{range .PackageDescriptors}}
-	<div class="flex-list">
-		<div class="flex-item">
-			<div class="flex-item-main">
-				<a class="flex-item-title" href="{{.VersionWebLink}}">{{.Version.LowerVersion}}</a>
-				<div class="flex-item-body">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
+			<div class="item-main">
+				<a class="item-title" href="{{.VersionWebLink}}">{{.Version.LowerVersion}}</a>
+				<div class="item-body">
 					{{ctx.Locale.Tr "packages.published_by" (DateUtils.TimeSince .Version.CreatedUnix) .Creator.HomeLink .Creator.GetDisplayName}}
 				</div>
 			</div>

templates/repo/actions/runs_list.tmpl

@@ -1,4 +1,4 @@
-<div class="flex-list run-list">
+<div class="flex-divided-list items-with-main run-list">
 	{{if not .Runs}}
 	<div class="empty-placeholder">
 		{{svg "octicon-no-entry" 48}}
@@ -6,19 +6,19 @@
 	</div>
 	{{end}}
 	{{range $run := .Runs}}
-		<div class="flex-item tw-items-center">
-			<div class="flex-item-leading">
+		<div class="item tw-items-center">
+			<div class="item-leading">
 				{{template "repo/actions/status" (dict "status" $run.Status.String)}}
 			</div>
-			<div class="flex-item-main">
-				<span class="flex-item-title" title="{{$run.Title}}">
+			<div class="item-main">
+				<span class="item-title" title="{{$run.Title}}">
 					{{if $run.Title}}
 						{{ctx.RenderUtils.RenderCommitMessageLinkSubject $run.Title $run.Link $.Repository}}
 					{{else}}
 						<a href="{{$run.Link}}">{{ctx.Locale.Tr "actions.runs.empty_commit_message"}}</a>
 					{{end}}
 				</span>
-				<div class="flex-item-body">
+				<div class="item-body">
 					<span><b>{{if not $.CurWorkflow}}{{$run.WorkflowID}} {{end}}#{{$run.Index}}</b>:</span>
 
 					{{- if $run.ScheduleID -}}
@@ -38,7 +38,7 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				{{if $run.IsRefDeleted}}
 					<span class="ui label run-list-ref gt-ellipsis tw-line-through" data-tooltip-content="{{$run.RefTooltip}}">{{$run.PrettyRef}}</span>
 				{{else}}

templates/repo/header.tmpl

@@ -1,17 +1,14 @@
 <div class="secondary-nav">
-{{with .Repository}}
+	{{with .Repository}}
 	<div class="ui container">
-		<div class="repo-header">
-			<div class="flex-item tw-items-center">
-				<div class="flex-item-leading">
-					{{template "repo/icon" .}}
+		<div class="repo-header flex-left-right">
+			{{/* left part */}}
+			<div class="flex-text-block">
+				{{template "repo/icon" .}}
+				<div class="flex-text-block tw-flex-wrap tw-text-18">
+					<a class="muted tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a>
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title tw-text-18">
-						<a class="muted tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a>
-					</div>
-				</div>
-				<div class="flex-item-trailing">
+				<div class="flex-text-block tw-flex-wrap">
 					{{if .IsArchived}}
 						<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
 						<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.archived"}}">{{svg "octicon-archive" 18}}</div>
@@ -38,6 +35,7 @@
 				</div>
 			</div>
 			{{if not (or .IsBeingCreated .IsBroken)}}
+				{{/* right part */}}
 				<div class="flex-text-block tw-flex-wrap">
 					{{if $.CanUserAcceptOrRejectTransfer}}
 						<button type="button" class="ui compact small basic primary button link-action" data-url="{{$.RepoLink}}/action/accept_transfer"
@@ -67,17 +65,20 @@
 				</div>
 			{{end}}
 		</div>
+
+		{{/* next line, secondary info */}}
 		{{if $.PullMirror}}
-			<div class="fork-flag">
+			<div class="secondary-info">
 				{{ctx.Locale.Tr "repo.mirror_from"}}
 				<a target="_blank" href="{{$.PullMirror.RemoteAddress}}">{{$.PullMirror.RemoteAddress}}</a>
 				{{if $.PullMirror.UpdatedUnix}}{{ctx.Locale.Tr "repo.mirror_sync"}} {{DateUtils.TimeSince $.PullMirror.UpdatedUnix}}{{end}}
 			</div>
 		{{end}}
-		{{if .IsFork}}<div class="fork-flag">{{ctx.Locale.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{.BaseRepo.FullName}}</a></div>{{end}}
-		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
+		{{if .IsFork}}<div class="secondary-info">{{ctx.Locale.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{.BaseRepo.FullName}}</a></div>{{end}}
+		{{if .IsGenerated}}<div class="secondary-info">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
-{{end}}
+	{{end}}
+
 	<div class="ui container">
 		<overflow-menu class="ui secondary pointing menu">
 			{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}

templates/repo/home_sidebar_bottom.tmpl

@@ -1,61 +1,47 @@
-<div class="repo-home-sidebar-bottom">
-	<div class="flex-list">
-		{{if .LatestRelease}}
-		<div class="flex-item">
-			<div class="flex-item-main">
-				<div class="flex-item-title">
-					<a class="item muted" href="{{.RepoLink}}/releases">
-						{{ctx.Locale.Tr "repo.releases"}}
-					</a>
-					<span class="ui small label">{{.NumReleases}}</span>
-				</div>
-				<div class="flex-item">
-					<div class="flex-item-leading">
-						<div class="tw-mt-1">{{svg "octicon-tag" 16}}</div>
-					</div>
-					<div class="flex-item-main">
-						<div class="flex-item-header">
-							<div class="flex-item-title tw-gap-2">
-								<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
-								{{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}}
-							</div>
-						</div>
-						<div class="flex-item-body">
-							<span class="time">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</span>
-						</div>
-					</div>
+<div class="repo-home-sidebar-bottom flex-relaxed-list">
+	{{if .LatestRelease}}
+		<div class="divider"></div>
+		<div class="repo-home-sidebar-header">
+			<a class="item muted" href="{{.RepoLink}}/releases">
+				{{ctx.Locale.Tr "repo.releases"}}
+			</a>
+			<span class="ui small label">{{.NumReleases}}</span>
+		</div>
+		<div class="flex-relaxed-list">
+			<div class="flex-text-block">
+				<div>{{svg "octicon-tag"}}</div>
+				<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
+				<div class="tw-shrink-0">
+					{{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}}
 				</div>
 			</div>
+			<div class="tw-ml-[24px]">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</div>
 		</div>
-		{{end}}
+	{{end}}
 
-		{{if and (not .IsEmptyRepo) .LanguageStats}}
-		<div class="flex-item">
-			<div class="flex-item-main">
-				<div class="flex-item-title">
-					{{ctx.Locale.Tr "repo.repo_lang"}}
-				</div>
+	{{if and (not .IsEmptyRepo) .LanguageStats}}
+		<div class="divider"></div>
+		<div class="repo-home-sidebar-header">
+			{{ctx.Locale.Tr "repo.repo_lang"}}
+		</div>
 
-				<div class="flex-item-body">
-					<div class="language-stats">
-						{{range .LanguageStats}}
-							<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
-						{{end}}
-					</div>
-					<div class="language-stats-details">
-						{{range .LanguageStats}}
-							<div class="item">
-								<i class="color-icon" style="background-color: {{.Color}}"></i>
-								<span class="tw-font-semibold">
-									{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}}
-								</span>
-								{{.Percentage}}%
-							</div>
-						{{end}}
-					</div>
+		<div>
+			<div class="language-stats">
+				{{range .LanguageStats}}
+				<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content="{{.Language}}" data-tooltip-follow-cursor="horizontal"></div>
+				{{end}}
+			</div>
+			<div class="language-stats-details">
+				{{range .LanguageStats}}
+				<div class="item">
+					<i class="color-icon" style="background-color: {{.Color}}"></i>
+					<strong class="tw-font-semibold">
+						{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}}
+					</strong>
+					{{.Percentage}}%
 				</div>
+				{{end}}
 			</div>
 		</div>
-		{{end}}
-	</div>
+	{{end}}
 </div>

templates/repo/home_sidebar_top.tmpl

@@ -1,4 +1,4 @@
-<div class="repo-home-sidebar-top">
+<div class="repo-home-sidebar-top flex-relaxed-list">
 	<form class="ignore-dirty tw-flex" action="{{.RepoLink}}/search" method="get">
 		<div class="ui small action input tw-flex tw-flex-1">
 			<div class="ui input tw-flex tw-flex-1 global-shortcut-wrapper">
@@ -9,71 +9,64 @@
 		</div>
 	</form>
 
-	<div class="flex-list">
-		<div class="flex-item">
-			<div class="flex-item-main">
-				<div class="flex-item-title">{{ctx.Locale.Tr "repo.repo_desc"}}</div>
-				<div class="flex-item-body tw-text-15">
-					<div class="tw-flex tw-flex-col tw-gap-2 tw-mt-2">
-						<div class="repo-description tw-break-anywhere tw-gap-2">
-							{{- $description := .Repository.DescriptionHTML ctx -}}
-							{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
-						</div>
+	<div class="flex-relaxed-list">
+		<div class="repo-home-sidebar-header">{{ctx.Locale.Tr "repo.repo_desc"}}</div>
 
-						{{if .Repository.Website}}
-							<a class="flex-text-block" href="{{.Repository.Website}}">
-								{{svg "octicon-link" 16 "tw-text-text"}} <span class="tw-text-primary">{{.Repository.Website}}</span>
-							</a>
-						{{end}}
+		<div class="repo-description tw-break-anywhere tw-gap-2">
+			{{- $description := .Repository.DescriptionHTML ctx -}}
+			{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
+		</div>
 
-						<div id="repo-topics" class="flex-text-block tw-flex-wrap tw-gap-1 tw-my-1 tw-text-text">
-							{{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}}
-							{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-						</div>
-						{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-							<button id="manage_topic" class="btn interact-fg tw-mb-2 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
-							<div class="ui form tw-hidden tw-my-2" id="topic_edit">
-								<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
-									<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
-									{{range .Topics}}
-										{{/* keep the same layout as Fomantic UI generated labels */}}
-										<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
-									{{end}}
-									<div class="text"></div>
-								</div>
-								<div class="tw-my-2">
-									<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
-									<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
-								</div>
-							</div>
-						{{end}}
+		{{if .Repository.Website}}
+			<a class="flex-text-block" href="{{.Repository.Website}}">
+				{{svg "octicon-link" 16 "tw-text-text"}} <span class="tw-text-primary">{{.Repository.Website}}</span>
+			</a>
+		{{end}}
 
-						{{if .ReadmeExist}}
-							<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}/{{PathEscapeSegments .FileTreePath}}">
-								{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
-							</a>
-						{{end}}
-
-						{{if .DetectedRepoLicenses}}
-							<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
-								{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
-							</a>
-						{{end}}
-
-						{{if .CitiationExist}}
-							{{template "repo/cite/cite_modal" .}}
-							<a class="flex-text-block muted" id="cite-repo-button">
-								{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
-							</a>
-						{{end}}
-						<span class="flex-text-block muted" {{if not (eq .Repository.Size 0)}}data-tooltip-placement="top" data-tooltip-content="{{.Repository.SizeDetailsString}}"{{end}}>
-							{{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}}
-							{{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}}
-							{{svg "octicon-database"}} <b>{{ctx.Locale.PrettyNumber (index $fileSizeFields 0)}}</b> {{index $fileSizeFields 1}}
-						</span>
-					</div>
+		<div id="repo-topics" class="flex-text-block tw-flex-wrap tw-gap-1 tw-my-1 tw-text-text">
+			{{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}}
+			{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+		</div>
+		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
+			<button id="manage_topic" class="btn interact-fg tw-mb-2 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
+			<div class="ui form tw-hidden tw-my-2" id="topic_edit">
+				<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
+					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
+					{{range .Topics}}
+						{{/* keep the same layout as Fomantic UI generated labels */}}
+						<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
+					{{end}}
+					<div class="text"></div>
+				</div>
+				<div class="tw-my-2">
+					<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
+					<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
 				</div>
 			</div>
+		{{end}}
+
+		{{if .ReadmeExist}}
+			<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}/{{PathEscapeSegments .FileTreePath}}">
+				{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
+			</a>
+		{{end}}
+
+		{{if .DetectedRepoLicenses}}
+			<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
+				{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
+			</a>
+		{{end}}
+
+		{{if .CitiationExist}}
+			{{template "repo/cite/cite_modal" .}}
+			<a class="flex-text-block muted" id="cite-repo-button">
+				{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
+			</a>
+		{{end}}
+		<div class="flex-text-block muted" {{if not (eq .Repository.Size 0)}}data-tooltip-placement="top" data-tooltip-content="{{.Repository.SizeDetailsString}}"{{end}}>
+			{{$fileSizeFormatted := FileSize .Repository.Size}}{{/* the formatted string is always "{val} {unit}" */}}
+			{{$fileSizeFields := StringUtils.Split $fileSizeFormatted " "}}
+			{{svg "octicon-database"}} <b>{{ctx.Locale.PrettyNumber (index $fileSizeFields 0)}}</b> {{index $fileSizeFields 1}}
 		</div>
 	</div>
 </div>

templates/repo/settings/actions_general.tmpl

@@ -62,18 +62,18 @@
 	</h4>
 	{{if len .CollaborativeOwners}}
 	<div class="ui attached segment">
-		<div class="flex-list">
+		<div class="flex-divided-list items-with-main">
 			{{range .CollaborativeOwners}}
-			<div class="flex-item tw-items-center">
-				<div class="flex-item-leading">
+			<div class="item tw-items-center">
+				<div class="item-leading">
 					<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">
+				<div class="item-main">
+					<div class="item-title">
 						{{template "shared/user/name" .}}
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button inline link-action"
 						data-url="{{$.Link}}/collaborative_owner/delete?id={{.ID}}"
 						data-modal-confirm-header="{{ctx.Locale.Tr "actions.general.remove_collaborative_owner"}}"

templates/repo/settings/branches.tmpl

@@ -37,18 +37,18 @@
 			</h4>
 
 			<div class="ui attached segment">
-				<div class="flex-list" id="protected-branches-list" data-update-priority-url="{{$.Repository.Link}}/settings/branches/priority">
+				<div class="flex-divided-list items-with-main" id="protected-branches-list" data-update-priority-url="{{$.Repository.Link}}/settings/branches/priority">
 					{{range .ProtectedBranches}}
-						<div class="flex-item tw-items-center item" data-id="{{.ID}}" >
+						<div class="item tw-items-center" data-id="{{.ID}}" >
 							<div class="drag-handle tw-cursor-grab">
 								{{svg "octicon-grabber" 16}}
 							</div>
-							<div class="flex-item-main">
-								<div class="flex-item-title">
+							<div class="item-main">
+								<div class="item-title">
 									<div class="ui basic primary label">{{.RuleName}}</div>
 								</div>
 							</div>
-							<div class="flex-item-trailing">
+							<div class="item-trailing">
 								<a class="ui tiny button" href="{{$.Repository.Link}}/settings/branches/edit?rule_name={{.RuleName}}">{{ctx.Locale.Tr "repo.settings.edit_protected_branch"}}</a>
 								<button class="ui red tiny button link-action" data-modal-confirm="#repo-branch-protection-delete-modal" data-url="{{$.Repository.Link}}/settings/branches/{{.ID}}/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "repo.settings.protected_branch.delete_rule"}}
@@ -56,7 +56,7 @@
 							</div>
 						</div>
 					{{else}}
-						<div class="flex-item tw-text-center">
+						<div class="item tw-text-center">
 							{{ctx.Locale.Tr "repo.settings.no_protected_branch"}}
 						</div>
 					{{end}}

templates/repo/settings/collaboration.tmpl

@@ -5,18 +5,18 @@
 		</h4>
 		{{if .Collaborators}}
 		<div class="ui attached segment">
-			<div class="flex-list">
+			<div class="flex-divided-list items-with-main">
 				{{range .Collaborators}}
-					<div class="flex-item tw-items-center">
-						<div class="flex-item-leading">
+					<div class="item tw-items-center">
+						<div class="item-leading">
 							<a href="{{.HomeLink}}">{{ctx.AvatarUtils.Avatar . 32}}</a>
 						</div>
-						<div class="flex-item-main">
-							<div class="flex-item-title">
+						<div class="item-main">
+							<div class="item-title">
 								{{template "shared/user/name" .}}
 							</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<div class="flex-text-block">
 								{{svg "octicon-shield-lock"}}
 								<div class="ui dropdown custom access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{.Collaboration.Mode}}">
@@ -54,14 +54,14 @@
 			{{$allowedToChangeTeams := (or (.Org.RepoAdminChangeTeamAccess) (.Permission.IsOwner))}}
 			{{if .Teams}}
 			<div class="ui attached segment">
-				<div class="flex-list">
+				<div class="flex-divided-list items-with-main">
 					{{range $t, $team := .Teams}}
-						<div class="flex-item">
-							<div class="flex-item-main">
-								<a class="flex-item-title tw-text-primary" href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}">
+						<div class="item">
+							<div class="item-main">
+								<a class="item-title tw-text-primary" href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}">
 									{{.Name}}
 								</a>
-								<div class="flex-item-body flex-text-block">
+								<div class="item-body flex-text-block">
 									{{/*FIXME: TEAM-UNIT-PERMISSION this display is not right, search the fixme keyword to see more details */}}
 									{{svg "octicon-shield-lock"}}
 									{{if eq .AccessMode 0}}
@@ -80,7 +80,7 @@
 								</div>
 								{{if or (eq .AccessMode 0) (eq .AccessMode 1) (eq .AccessMode 2)}}
 									{{$first := true}}
-									<div class="flex-item-body" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.change_team_permission_tip"}}">
+												<div class="item-body" data-tooltip-content="{{ctx.Locale.Tr "repo.settings.change_team_permission_tip"}}">
 										Units:
 										{{range $u, $unit := $.Units}}
 											{{- if and ($.Repo.UnitEnabled ctx $unit.Type) ($team.UnitEnabled ctx $unit.Type) -}}
@@ -93,7 +93,7 @@
 								{{end}}
 							</div>
 							{{if $allowedToChangeTeams}}
-								<div class="flex-item-trailing" {{if .IncludesAllRepositories}} data-tooltip-content="{{ctx.Locale.Tr "repo.settings.delete_team_tip"}}"{{end}}>
+								<div class="item-trailing" {{if .IncludesAllRepositories}} data-tooltip-content="{{ctx.Locale.Tr "repo.settings.delete_team_tip"}}"{{end}}>
 									<button class="ui red tiny button link-action {{if .IncludesAllRepositories}}disabled{{end}}" data-modal-confirm="#repo-collaborator-delete-modal" data-url="{{$.Link}}/team/delete?id={{.ID}}">
 											{{ctx.Locale.Tr "repo.settings.delete_collaborator"}}
 									</button>

templates/repo/settings/deploy_keys.tmpl

@@ -42,22 +42,22 @@
 				</form>
 			</div>
 			{{if .Deploykeys}}
-				<div class="flex-list">
+				<div class="flex-divided-list items-with-main">
 					{{range .Deploykeys}}
-						<div class="flex-item">
-							<div class="flex-item-leading">
+						<div class="item">
+							<div class="item-leading">
 								<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 							</div>
-							<div class="flex-item-main">
-								<div class="flex-item-title">{{.Name}}</div>
-								<div class="flex-item-body">
+							<div class="item-main">
+								<div class="item-title">{{.Name}}</div>
+								<div class="item-body">
 									{{.Fingerprint}}
 								</div>
-								<div class="flex-item-body">
+								<div class="item-body">
 									<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —  {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}} - <span>{{ctx.Locale.Tr "settings.can_read_info"}}{{if not .IsReadOnly}} / {{ctx.Locale.Tr "settings.can_write_info"}} {{end}}</span></i>
 								</div>
 							</div>
-							<div class="flex-item-trailing">
+							<div class="item-trailing">
 								<button class="ui red tiny button link-action" data-modal-confirm="#repo-deploy-key-delete-modal" data-url="{{$.Link}}/delete?id={{.ID}}">
 									{{ctx.Locale.Tr "settings.delete_key"}}
 								</button>

templates/repo/settings/options.tmpl

@@ -761,18 +761,18 @@
 			{{ctx.Locale.Tr "repo.settings.danger_zone"}}
 		</h4>
 		<div class="ui attached error danger segment">
-			<div class="flex-list">
+			<div class="flex-divided-list items-with-main">
 				{{if not .Repository.IsFork}}
-					<div class="flex-item tw-items-center">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.visibility"}}</div>
+					<div class="item tw-items-center">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.visibility"}}</div>
 							{{if .Repository.IsPrivate}}
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.visibility.public.text"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.visibility.public.text"}}</div>
 							{{else}}
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.visibility.private.text"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.visibility.private.text"}}</div>
 							{{end}}
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#visibility-repo-modal">
 								{{if .Repository.IsPrivate}}
 									{{ctx.Locale.Tr "repo.settings.visibility.public.button"}}
@@ -784,31 +784,31 @@
 					</div>
 				{{end}}
 				{{if .Repository.IsMirror}}
-					<div class="flex-item">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.convert"}}</div>
-							<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.convert_desc"}}</div>
+					<div class="item">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.settings.convert"}}</div>
+							<div class="item-body">{{ctx.Locale.Tr "repo.settings.convert_desc"}}</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#convert-mirror-repo-modal">{{ctx.Locale.Tr "repo.settings.convert"}}</button>
 						</div>
 					</div>
 				{{end}}
 				{{if .CanConvertFork}}
-					<div class="flex-item">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.convert_fork"}}</div>
-							<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.convert_fork_desc"}}</div>
+					<div class="item">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.settings.convert_fork"}}</div>
+							<div class="item-body">{{ctx.Locale.Tr "repo.settings.convert_fork_desc"}}</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#convert-fork-repo-modal">{{ctx.Locale.Tr "repo.settings.convert_fork"}}</button>
 						</div>
 					</div>
 				{{end}}
-				<div class="flex-item">
-					<div class="flex-item-main">
-						<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.transfer"}}</div>
-						<div class="flex-item-body">
+				<div class="item">
+					<div class="item-main">
+						<div class="item-title">{{ctx.Locale.Tr "repo.settings.transfer"}}</div>
+						<div class="item-body">
 							{{if .RepoTransfer}}
 								{{ctx.Locale.Tr "repo.settings.transfer_started" .RepoTransfer.Recipient.DisplayName}}
 							{{else}}
@@ -816,7 +816,7 @@
 							{{end}}
 						</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						{{if .RepoTransfer}}
 							<form class="ui form" action="{{.Link}}" method="post">
 								<input type="hidden" name="action" value="cancel_transfer">
@@ -828,37 +828,37 @@
 					</div>
 				</div>
 				{{if .Permission.CanRead ctx.Consts.RepoUnitTypeWiki}}
-					<div class="flex-item">
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.wiki_delete"}}</div>
-							<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.wiki_delete_desc"}}</div>
+					<div class="item">
+						<div class="item-main">
+							<div class="item-title">{{ctx.Locale.Tr "repo.settings.wiki_delete"}}</div>
+							<div class="item-body">{{ctx.Locale.Tr "repo.settings.wiki_delete_desc"}}</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#delete-wiki-modal">{{ctx.Locale.Tr "repo.settings.wiki_delete"}}</button>
 						</div>
 					</div>
 				{{end}}
-				<div class="flex-item">
-					<div class="flex-item-main">
-						<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.delete"}}</div>
-						<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.delete_desc"}}</div>
+				<div class="item">
+					<div class="item-main">
+						<div class="item-title">{{ctx.Locale.Tr "repo.settings.delete"}}</div>
+						<div class="item-body">{{ctx.Locale.Tr "repo.settings.delete_desc"}}</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						<button class="ui basic red show-modal button" data-modal="#delete-repo-modal">{{ctx.Locale.Tr "repo.settings.delete"}}</button>
 					</div>
 				</div>
 				{{if not .Repository.IsMirror}}
-					<div class="flex-item tw-items-center">
-						<div class="flex-item-main">
+					<div class="item tw-items-center">
+						<div class="item-main">
 							{{if .Repository.IsArchived}}
-								<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.unarchive.header"}}</div>
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.unarchive.text"}}</div>
+								<div class="item-title">{{ctx.Locale.Tr "repo.settings.unarchive.header"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.unarchive.text"}}</div>
 							{{else}}
-								<div class="flex-item-title">{{ctx.Locale.Tr "repo.settings.archive.header"}}</div>
-								<div class="flex-item-body">{{ctx.Locale.Tr "repo.settings.archive.text"}}</div>
+								<div class="item-title">{{ctx.Locale.Tr "repo.settings.archive.header"}}</div>
+								<div class="item-body">{{ctx.Locale.Tr "repo.settings.archive.text"}}</div>
 							{{end}}
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<button class="ui basic red show-modal button" data-modal="#archive-repo-modal">
 								{{if .Repository.IsArchived}}
 									{{ctx.Locale.Tr "repo.settings.unarchive.button"}}

templates/shared/issuelist.tmpl

@@ -1,21 +1,21 @@
-<div id="issue-list" class="flex-list">
+<div id="issue-list" class="flex-divided-list items-with-main">
 	{{$approvalCounts := .ApprovalCounts}}
 	{{range .Issues}}
-		<div class="flex-item">
+		<div class="item">
 
-			<div class="flex-item-leading">
+			<div class="item-leading">
 				{{/* using some tw helpers is the only way to align the checkbox */}}
 				<div class="flex-text-inline tw-mt-[3px]">
 					{{if $.CanWriteIssuesOrPulls}}
-						<input type="checkbox" autocomplete="off" class="issue-checkbox tw-mr-[14px]" data-issue-id={{.ID}} aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
+						<input type="checkbox" autocomplete="off" class="issue-checkbox tw-mr-[14px]" data-issue-id="{{.ID}}" aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}}: {{.Title}}">
 					{{end}}
 					{{template "shared/issueicon" .}}
 				</div>
 			</div>
 
-			<div class="flex-item-main">
-				<div class="flex-item-header">
-					<div class="flex-item-title">
+			<div class="item-main">
+				<div class="item-header">
+					<div class="item-title">
 						<a class="tw-no-underline issue-title" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 						{{if .IsPull}}
 							{{if (index $.CommitStatuses .PullRequest.ID)}}
@@ -35,7 +35,7 @@
 					</div>
 					{{end}}
 				</div>
-				<div class="flex-item-body">
+				<div class="item-body">
 					<a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{if eq $.listType "dashboard"}}
 							{{.Repo.FullName}}#{{.Index}}
@@ -136,7 +136,7 @@
 				</div>
 			</div>
 			{{if or .Assignees .NumComments}}
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				{{if .Assignees}}
 				<div class="tw-text-text-light">
 					{{range .Assignees}}

templates/shared/repo/list.tmpl

@@ -1,16 +1,16 @@
-<div class="flex-list">
+<div class="flex-divided-list items-with-main">
 	{{range .Repos}}
-		<div class="flex-item">
-			<div class="flex-item-leading">
+		<div class="item">
+			<div class="item-leading">
 				{{if $.ShowRepoOwnerAvatar}}
 					{{ctx.AvatarUtils.Avatar .Owner 24}}
 				{{else}}
 					{{template "repo/icon" .}}
 				{{end}}
 			</div>
-			<div class="flex-item-main">
-				<div class="flex-item-header">
-					<div class="flex-item-title">
+			<div class="item-main">
+				<div class="item-header">
+					<div class="item-title">
 						{{if and $.ShowRepoOwnerOnList .Owner}}
 						<a class="tw-text-primary name" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
 						{{end}}
@@ -34,7 +34,7 @@
 							{{end}}
 						</span>
 					</div>
-					<div class="flex-item-trailing muted-links">
+					<div class="item-trailing muted-links">
 						{{if .PrimaryLanguage}}
 							<a class="flex-text-inline" href="?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}{{if $.TabName}}&tab={{$.TabName}}{{end}}">
 								<i class="color-icon tw-mr-2" style="background-color: {{.PrimaryLanguage.Color}}"></i>
@@ -55,7 +55,7 @@
 				</div>
 				{{$description := .DescriptionHTML ctx}}
 				{{if $description}}
-					<div class="flex-item-body">{{$description}}</div>
+					<div class="item-body">{{$description}}</div>
 				{{end}}
 				{{if .Topics}}
 					<div class="label-list">
@@ -64,7 +64,7 @@
 					{{end}}
 					</div>
 				{{end}}
-				<div class="flex-item-body">{{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .UpdatedUnix}}</div>
+				<div class="item-body">{{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .UpdatedUnix}}</div>
 			</div>
 		</div>
 	{{else}}

templates/shared/secrets/add_list.tmpl

@@ -16,24 +16,24 @@
 </h4>
 <div class="ui attached segment">
 	{{if .Secrets}}
-	<div class="flex-list">
+	<div class="flex-divided-list items-with-main">
 		{{range .Secrets}}
-		<div class="flex-item tw-items-center">
-			<div class="flex-item-leading">
+		<div class="item tw-items-center">
+			<div class="item-leading">
 				{{svg "octicon-key" 32}}
 			</div>
-			<div class="flex-item-main">
-				<div class="flex-item-title">
+			<div class="item-main">
+				<div class="item-title">
 					{{.Name}}
 				</div>
-				<div class="flex-item-body">
+				<div class="item-body">
 					{{if .Description}}{{.Description}}{{else}}-{{end}}
 				</div>
-				<div class="flex-item-body">
+				<div class="item-body">
 					******
 				</div>
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				<span class="color-text-light-2">
 					{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}
 				</span>

templates/shared/user/blocked_users.tmpl

@@ -22,23 +22,23 @@
 	{{ctx.Locale.Tr "user.block.list"}}
 </h4>
 <div class="ui attached segment">
-	<div class="flex-list">
+	<div class="flex-divided-list items-with-main">
 		{{range .UserBlocks}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{ctx.AvatarUtils.Avatar .Blockee}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">
+				<div class="item-main">
+					<div class="item-title">
 						<a class="item" href="{{.Blockee.HomeLink}}">{{.Blockee.GetDisplayName}}</a>
 					</div>
 					{{if .Note}}
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "user.block.note"}}:</i> {{.Note}}
 					</div>
 					{{end}}
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui compact mini button show-modal" data-modal="#block-user-note-modal" data-modal-modal-blockee="{{.Blockee.Name}}" data-modal-modal-note="{{.Note}}">{{ctx.Locale.Tr "user.block.note.edit"}}</button>
 					<form class="form-fetch-action" action="{{$.Link}}" method="post">
 						<input type="hidden" name="action" value="unblock">

templates/shared/variables/variable_list.tmpl

@@ -15,24 +15,24 @@
 </h4>
 <div class="ui attached segment">
 	{{if .Variables}}
-	<div class="flex-list">
+	<div class="flex-divided-list items-with-main">
 		{{range .Variables}}
-		<div class="flex-item tw-items-center">
-			<div class="flex-item-leading">
+		<div class="item tw-items-center">
+			<div class="item-leading">
 				{{svg "octicon-pencil" 32}}
 			</div>
-			<div class="flex-item-main">
-				<div class="flex-item-title">
+			<div class="item-main">
+				<div class="item-title">
 					{{.Name}}
 				</div>
-				<div class="flex-item-body">
+				<div class="item-body">
 					{{if .Description}}{{.Description}}{{else}}-{{end}}
 				</div>
-				<div class="flex-item-body">
+				<div class="item-body">
 					{{.Data}}
 				</div>
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				<span class="color-text-light-2">
 					{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}
 				</span>

templates/user/dashboard/feeds.tmpl

@@ -1,10 +1,10 @@
-<div id="activity-feed" class="flex-list" data-ref-issue-container>
+<div id="activity-feed" class="flex-divided-list items-with-main" data-ref-issue-container>
 	{{range .Feeds}}
-		<div class="flex-item">
-			<div class="flex-item-leading">
+		<div class="item">
+			<div class="item-leading">
 				{{ctx.AvatarUtils.AvatarByAction .}}
 			</div>
-			<div class="flex-item-main tw-gap-2">
+			<div class="item-main tw-gap-2">
 				<div>
 					{{if gt .ActUser.ID 0}}
 						<a href="{{AppSubUrl}}/{{(.GetActUserName ctx) | PathEscape}}" title="{{.GetActDisplayNameTitle ctx}}">{{.GetActDisplayName ctx}}</a>
@@ -113,15 +113,15 @@
 						<div class="render-content markup truncated-markup">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>
 					{{end}}
 				{{else if .GetOpType.InActions "merge_pull_request"}}
-					<div class="flex-item-body tw-text-text">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</div>
+					<div class="item-body tw-text-text">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</div>
 				{{else if .GetOpType.InActions "close_issue" "reopen_issue" "close_pull_request" "reopen_pull_request"}}
 					<span class="tw-inline-block tw-truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "pull_review_dismissed"}}
-				<div class="flex-item-body tw-text-text">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</div>
-				<div class="flex-item-body tw-text-text">{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}</div>
+				<div class="item-body tw-text-text">{{ctx.Locale.Tr "action.review_dismissed_reason"}}</div>
+				<div class="item-body tw-text-text">{{index .GetIssueInfos 2 | ctx.RenderUtils.RenderEmoji}}</div>
 				{{end}}
 			</div>
-			<div class="flex-item-trailing">
+			<div class="item-trailing">
 				{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32 "tw-text-text-light tw-mr-1"}}
 			</div>
 		</div>

templates/user/settings/applications.tmpl

@@ -4,20 +4,20 @@
 			{{ctx.Locale.Tr "settings.manage_access_token"}}
 		</h4>
 		<div class="ui attached segment">
-			<div class="flex-list">
-				<div class="flex-item">
+			<div class="flex-divided-list items-with-main">
+				<div class="item">
 					{{ctx.Locale.Tr "settings.tokens_desc"}}
 				</div>
 				{{range .Tokens}}
-					<div class="flex-item">
-						<div class="flex-item-leading">
+					<div class="item">
+						<div class="item-leading">
 							<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.token_state_desc"}}"{{end}}>
 								{{svg "fontawesome-send" 32}}
 							</span>
 						</div>
-						<div class="flex-item-main">
+						<div class="item-main">
 							<details>
-								<summary><span class="flex-item-title">{{.Name}}</span></summary>
+								<summary><span class="item-title">{{.Name}}</span></summary>
 								<p class="tw-my-1">
 									{{ctx.Locale.Tr "settings.repo_and_org_access"}}:
 									{{if .DisplayPublicOnly}}
@@ -35,11 +35,11 @@
 								{{end}}
 								</ul>
 							</details>
-							<div class="flex-item-body">
+							<div class="item-body">
 								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} — {{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 							</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 								<button class="ui red tiny button delete-button" data-modal-id="delete-token" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
 									{{svg "octicon-trash"}}
 									{{ctx.Locale.Tr "settings.delete_token"}}

templates/user/settings/applications_oauth2_list.tmpl

@@ -1,22 +1,22 @@
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.oauth2_application_create_description"}}
 		</div>
 		{{range .Applications}}
-			<div class="flex-item tw-items-center">
-				<div class="flex-item-leading">
+			<div class="item tw-items-center">
+				<div class="item-leading">
 					{{svg "octicon-apps" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.Name}}</div>
-					<div class="flex-item-body">
+				<div class="item-main">
+					<div class="item-title">{{.Name}}</div>
+					<div class="item-body">
 						{{ctx.Locale.Tr "settings.oauth2_client_id"}}
 						<span class="ui label">{{.ClientID}}</span>
 					</div>
 				</div>
 				{{$isBuiltin := and $.BuiltinApplications (index $.BuiltinApplications .ClientID)}}
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					{{if $isBuiltin}}
 						<span class="ui basic label" data-tooltip-content="{{ctx.Locale.Tr "settings.oauth2_application_locked"}}">{{ctx.Locale.Tr "locked"}}</span>
 					{{else}}

templates/user/settings/grants_oauth2.tmpl

@@ -2,22 +2,22 @@
 	{{ctx.Locale.Tr "settings.authorized_oauth2_applications"}}
 </h4>
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.authorized_oauth2_applications_description"}}
 		</div>
 		{{range .Grants}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{svg "octicon-key" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.Application.Name}}</div>
-					<div class="flex-item-body">
+				<div class="item-main">
+					<div class="item-title">{{.Application.Name}}</div>
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}</i>
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="revoke-gitea-oauth2-grant"
 							data-url="{{AppSubUrl}}/user/settings/applications/oauth2/{{.ApplicationID}}/revoke/{{.ID}}">
 						{{ctx.Locale.Tr "settings.revoke_key"}}

templates/user/settings/keys_gpg.tmpl

@@ -38,36 +38,36 @@
 			</button>
 		</form>
 	</div>
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			<p>
 				{{ctx.Locale.Tr "settings.gpg_desc"}}<br>
 				{{ctx.Locale.Tr "settings.gpg_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/about-commit-signature-verification#gpg-commit-signature-verification"}}
 			</p>
 		</div>
 		{{range .GPGKeys}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					<span class="{{if or .ExpiredUnix.IsZero ($.PageStartTime.Before .ExpiredUnix.AsTime)}}tw-text-green{{end}}">{{svg "octicon-key" 32}}</span>
 				</div>
-				<div class="flex-item-main">
+				<div class="item-main">
 					{{if .Verified}}
 						<span class="flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.gpg_key_verified_long"}}">{{svg "octicon-verified"}} <strong>{{ctx.Locale.Tr "settings.gpg_key_verified"}}</strong></span>
 					{{end}}
 					{{if .Emails}}
 						<span class="flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.gpg_key_matched_identities_long"}}">{{svg "octicon-mail"}} {{ctx.Locale.Tr "settings.gpg_key_matched_identities"}} {{range .Emails}}<strong>{{.Email}} </strong>{{end}}</span>
 					{{end}}
-					<div class="flex-item-body">
+					<div class="item-body">
 						<b>{{ctx.Locale.Tr "settings.key_id"}}:</b> {{.PaddedKeyID}}
 						<b>{{ctx.Locale.Tr "settings.subkeys"}}:</b> {{range .SubsKey}} {{.PaddedKeyID}} {{end}}
 					</div>
-					<div class="flex-item-body">
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .AddedUnix)}}</i>
 						-
 						<i>{{if not .ExpiredUnix.IsZero}}{{ctx.Locale.Tr "settings.valid_until_date" (DateUtils.AbsoluteShort .ExpiredUnix)}}{{else}}{{ctx.Locale.Tr "settings.valid_forever"}}{{end}}</i>
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="delete-gpg" data-url="{{$.Link}}/delete?type=gpg" data-id="{{.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>

templates/user/settings/keys_principal.tmpl

@@ -10,22 +10,22 @@
 		</div>
 	</h4>
 	<div class="ui attached segment">
-		<div class="flex-list">
-			<div class="flex-item">
+		<div class="flex-divided-list items-with-main">
+			<div class="item">
 				{{ctx.Locale.Tr "settings.principal_desc"}}
 			</div>
 			{{range .Principals}}
-				<div class="flex-item">
-					<div class="flex-item-leading">
+				<div class="item">
+					<div class="item-leading">
 						<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.principal_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 					</div>
-					<div class="flex-item-main">
-						<div class="flex-item-title">{{.Name}}</div>
-						<div class="flex-item-body">
+					<div class="item-main">
+						<div class="item-title">{{.Name}}</div>
+						<div class="item-body">
 							<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —  {{svg "octicon-info" 16}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 						</div>
 					</div>
-					<div class="flex-item-trailing">
+					<div class="item-trailing">
 						<button class="ui red tiny button delete-button" data-modal-id="delete-principal" data-url="{{$.Link}}/delete?type=principal" data-id="{{.ID}}">
 							{{ctx.Locale.Tr "settings.delete_key"}}
 						</button>

templates/user/settings/keys_ssh.tmpl

@@ -26,36 +26,36 @@
 			</button>
 		</form>
 	</div>
-	<div id="keys-ssh" class="flex-list">
-		<div class="flex-item">
+	<div id="keys-ssh" class="flex-divided-list items-with-main">
+		<div class="item">
 			<p>
 				{{ctx.Locale.Tr "settings.ssh_desc"}}<br>
 				{{ctx.Locale.Tr "settings.ssh_helper" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/connecting-to-github-with-ssh" "https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/troubleshooting-ssh"}}
 			</p>
 		</div>
 		{{if .DisableSSH}}
-			<div class="flex-item">
+			<div class="item">
 				{{ctx.Locale.Tr "settings.ssh_signonly"}}
 			</div>
 		{{end}}
 		{{range $index, $key := .Keys}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					<span class="{{if .HasRecentActivity}}tw-text-green{{end}}" {{if .HasRecentActivity}}data-tooltip-content="{{ctx.Locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 				</div>
-				<div class="flex-item-main">
+				<div class="item-main">
 						{{if .Verified}}
-							<div class="flex-item-title flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}</div>
+							<div class="item-title flex-text-block" data-tooltip-content="{{ctx.Locale.Tr "settings.ssh_key_verified_long"}}">{{svg "octicon-verified"}}{{ctx.Locale.Tr "settings.ssh_key_verified"}}</div>
 						{{end}}
-						<div class="flex-item-title">{{.Name}}</div>
-						<div class="flex-item-body">
+						<div class="item-title">{{.Name}}</div>
+						<div class="item-body">
 								{{.Fingerprint}}
 						</div>
-						<div class="flex-item-body">
+						<div class="item-body">
 								<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}} —	{{svg "octicon-info"}} {{if .HasUsed}}{{ctx.Locale.Tr "settings.last_used"}} <span {{if .HasRecentActivity}}class="tw-text-green"{{end}}>{{DateUtils.AbsoluteShort .UpdatedUnix}}</span>{{else}}{{ctx.Locale.Tr "settings.no_activity"}}{{end}}</i>
 						</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button{{if index $.ExternalKeys $index}} disabled{{end}}" data-modal-id="delete-ssh" data-url="{{$.Link}}/delete?type=ssh" data-id="{{.ID}}"{{if index $.ExternalKeys $index}} title="{{ctx.Locale.Tr "settings.ssh_externally_managed"}}"{{end}}>
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>

templates/user/settings/organization.tmpl

@@ -10,19 +10,19 @@
 		</h4>
 		<div class="ui attached segment orgs">
 			{{if .Orgs}}
-				<div class="flex-list">
+				<div class="flex-divided-list items-with-main">
 					{{range .Orgs}}
-					<div class="flex-item">
-						<div class="flex-item-leading">
+					<div class="item">
+						<div class="item-leading">
 							{{ctx.AvatarUtils.Avatar . 28 "mini"}}
 						</div>
-						<div class="flex-item-main">
-							<div class="flex-item-title">{{template "shared/user/name" .}}</div>
+						<div class="item-main">
+							<div class="item-title">{{template "shared/user/name" .}}</div>
 							<div class="flex-text-body">
 								{{.Description}}
 							</div>
 						</div>
-						<div class="flex-item-trailing">
+						<div class="item-trailing">
 							<form>
 								<button class="ui red button delete-button" data-modal-id="leave-organization"
 												data-url="{{.OrganisationLink}}/members/action/leave" data-datauid="{{$.SignedUser.ID}}"

templates/user/settings/security/accountlinks.tmpl

@@ -21,25 +21,25 @@
 </h4>
 
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.manage_account_links_desc"}}
 		</div>
 		{{range $loginSource, $provider := .AccountLinks}}
-			<div class="flex-item">
+			<div class="item">
 				{{$providerData := index $.OAuth2Providers $loginSource.Name}}
-				<div class="flex-item-leading">
+				<div class="item-leading">
 					{{$providerData.IconHTML 20}}
 				</div>
-				<div class="flex-item-main">
-					<span class="flex-item-title" data-tooltip-content="{{$provider}}">
+				<div class="item-main">
+					<span class="item-title" data-tooltip-content="{{$provider}}">
 						{{$loginSource.Name}}
 					</span>
 					{{if $loginSource.IsActive}}
 					<span class="flex-text-body tw-text-primary">{{ctx.Locale.Tr "repo.settings.active"}}</span>
 					{{end}}
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="delete-account-link" data-url="{{AppSubUrl}}/user/settings/security/account_link" data-id="{{$loginSource.ID}}">
 						{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>

templates/user/settings/security/openid.tmpl

@@ -2,19 +2,19 @@
 	{{ctx.Locale.Tr "settings.manage_openid"}}
 </h4>
 <div class="ui attached segment">
-	<div class="flex-list">
-		<div class="flex-item">
+	<div class="flex-divided-list items-with-main">
+		<div class="item">
 			{{ctx.Locale.Tr "settings.openid_desc"}}
 		</div>
 		{{range .OpenIDs}}
-			<div class="flex-item tw-items-center">
-				<div class="flex-item-leading">
+			<div class="item tw-items-center">
+				<div class="item-leading">
 					{{svg "fontawesome-openid" 20}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.URI}}</div>
+				<div class="item-main">
+					<div class="item-title">{{.URI}}</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<form action="{{AppSubUrl}}/user/settings/security/openid/toggle_visibility" method="post">
 						<input name="id" type="hidden" value="{{.ID}}">
 						{{if .Show}}

templates/user/settings/security/webauthn.tmpl

@@ -3,19 +3,19 @@
 	<p>{{ctx.Locale.Tr "settings.webauthn_desc" "https://w3c.github.io/webauthn/#webauthn-authenticator"}}</p>
 	<p>{{ctx.Locale.Tr "settings.webauthn_key_loss_warning"}} {{ctx.Locale.Tr "settings.webauthn_alternative_tip"}}</p>
 	{{template "user/auth/webauthn_error" .}}
-	<div class="flex-list">
+	<div class="flex-divided-list items-with-main">
 		{{range .WebAuthnCredentials}}
-			<div class="flex-item">
-				<div class="flex-item-leading">
+			<div class="item">
+				<div class="item-leading">
 					{{svg "octicon-key" 32}}
 				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">{{.Name}}</div>
-					<div class="flex-item-body">
+				<div class="item-main">
+					<div class="item-title">{{.Name}}</div>
+					<div class="item-body">
 						<i>{{ctx.Locale.Tr "settings.added_on" (DateUtils.AbsoluteShort .CreatedUnix)}}</i>
 					</div>
 				</div>
-				<div class="flex-item-trailing">
+				<div class="item-trailing">
 					<button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}">
 					{{ctx.Locale.Tr "settings.delete_key"}}
 					</button>

tests/e2e/issue-project.test.ts

@@ -335,7 +335,7 @@ test('filter issues with no project using project=-1', async ({page}) => {
     await expect(page.locator('#issue-list')).not.toContainText('Issue with project assigned');
 
     // Verify the last item in the list is NOT the issue with a project
-    const issueItems = page.locator('#issue-list .flex-item');
+    const issueItems = page.locator('#issue-list .item');
     const lastIssueItem = issueItems.last();
     await expect(lastIssueItem).not.toContainText('Issue with project assigned');
   } finally {

tests/integration/auth_ldap_test.go

@@ -395,7 +395,7 @@ func testLDAPUserSyncSSHKeys(t *testing.T) {
 		resp := session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc := NewHTMLParser(t, resp.Body)
 
-		divs := htmlDoc.doc.Find("#keys-ssh .flex-item .flex-item-body:not(:last-child)")
+		divs := htmlDoc.doc.Find("#keys-ssh .item .item-body:not(:last-child)")
 		syncedKeys := make([]string, divs.Length())
 		for i := 0; i < divs.Length(); i++ {
 			syncedKeys[i] = strings.TrimSpace(divs.Eq(i).Text())

tests/integration/issue_test.go

@@ -34,7 +34,7 @@ import (
 func getIssuesSelection(t testing.TB, htmlDoc *HTMLDoc) *goquery.Selection {
 	issueList := htmlDoc.doc.Find("#issue-list")
 	assert.Equal(t, 1, issueList.Length())
-	return issueList.Find(".flex-item").Find(".issue-title")
+	return issueList.Find(".item").Find(".issue-title")
 }
 
 func getIssue(t *testing.T, repoID int64, issueSelection *goquery.Selection) *issues_model.Issue {

tests/integration/privateactivity_test.go

@@ -57,7 +57,7 @@ func testPrivateActivityHelperEnablePrivateActivity(t *testing.T) {
 }
 
 func testPrivateActivityHelperHasVisibleActivitiesInHTMLDoc(htmlDoc *HTMLDoc) bool {
-	return htmlDoc.doc.Find("#activity-feed").Find(".flex-item").Length() > 0
+	return htmlDoc.doc.Find("#activity-feed").Find(".item").Length() > 0
 }
 
 func testPrivateActivityHelperHasVisibleActivitiesFromSession(t *testing.T, session *TestSession) bool {

tests/integration/repo_fork_test.go

@@ -82,7 +82,7 @@ func TestRepoForkToOrg(t *testing.T) {
 
 func TestForkListLimitedAndPrivateRepos(t *testing.T) {
 	defer tests.PrepareTestEnv(t)()
-	forkItemSelector := ".fork-list .flex-item"
+	forkItemSelector := ".fork-list .item"
 
 	user1Sess := loginUser(t, "user1")
 	user1 := unittest.AssertExistsAndLoadBean(t, &user_model.User{Name: "user1"})

web_src/css/actions.css

@@ -43,7 +43,7 @@
   align-items: center;
 }
 
-.run-list .flex-item-trailing {
+.run-list .item-trailing {
   flex-wrap: nowrap;
   width: 280px;
   flex: 0 0 280px;
@@ -55,7 +55,7 @@
 }
 
 @media (max-width: 767.98px) {
-  .run-list .flex-item-trailing {
+  .run-list .item-trailing {
     flex-direction: column;
     align-items: flex-end;
     width: auto;

web_src/css/base.css

@@ -872,13 +872,6 @@ table th[data-sortt-desc] .svg {
   align-items: stretch;
 }
 
-/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */
-.flex-relaxed-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-block);
-}
-
 /* this is useful to make a left-right (e.g.: title .... operations) layout with default gap, and it wrap for small widths */
 .flex-left-right {
   display: flex;

web_src/css/index.css

@@ -67,7 +67,6 @@
 @import "./repo/list-header.css";
 @import "./repo/file-view.css";
 @import "./repo/wiki.css";
-@import "./repo/header.css";
 @import "./repo/home.css";
 @import "./repo/home-file-list.css";
 @import "./repo/reactions.css";

web_src/css/repo.css

@@ -1,3 +1,12 @@
+.repo-header {
+  margin: 1em 0 0.5em;
+}
+
+.repo-header .secondary-info {
+  margin-top: 0.5rem;
+  font-size: 12px;
+}
+
 .repository .data-table .line-num,
 .repository .diff-file-box .file-body.file-code .lines-num,
 .repository .diff-file-box .code-diff tbody tr .lines-type-marker {

web_src/css/repo/header.css

@@ -1,29 +0,0 @@
-.repository .secondary-nav {
-  padding-top: 12px;
-}
-
-.repository .secondary-nav .fork-flag {
-  margin-top: 0.5rem;
-  font-size: 12px;
-}
-
-.repo-header {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-bottom: 4px;
-}
-
-.repo-header .flex-item {
-  padding: 0;
-}
-
-.repo-header .flex-item-main {
-  flex: 0;
-  flex-basis: unset;
-}
-
-.repo-header .flex-item-trailing {
-  flex-wrap: nowrap;
-}

web_src/css/repo/home.css

@@ -21,8 +21,10 @@
   grid-row: 2;
 }
 
-.repo-home-sidebar-bottom .flex-list > :first-child {
-  border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
+.repo-home-sidebar-header {
+  font-weight: var(--font-weight-semibold);
+  font-size: 16px;
+  margin-top: 0.5em;
 }
 
 @media (max-width: 767.98px) {
@@ -87,8 +89,7 @@
   border-radius: 5px;
   overflow: hidden;
   width: 100%;
-  margin-top: 1rem;
-  margin-bottom: 5px;
+  margin: 5px 0;
 }
 
 .language-stats-details {

web_src/css/repo/issue-list.css

@@ -34,17 +34,17 @@
   }
 }
 
-#issue-list .flex-item-body .branches {
+#issue-list .branches {
   display: inline-flex;
 }
 
-#issue-list .flex-item-body .branches .branch {
+#issue-list .branches .branch {
   background-color: var(--color-secondary-alpha-50);
   border-radius: var(--border-radius);
   padding: 0 4px;
 }
 
-#issue-list .flex-item-body .branches .truncated-name {
+#issue-list .branches .truncated-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -53,18 +53,18 @@
   vertical-align: top;
 }
 
-#issue-list .flex-item-body .checklist progress {
+#issue-list .checklist progress {
   margin-left: 2px;
   width: 80px;
   height: 6px;
   display: inline-block;
 }
 
-#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
+#issue-list .checklist progress::-webkit-progress-value {
   background-color: var(--color-secondary-dark-4);
 }
 
-#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
+#issue-list .checklist progress::-moz-progress-bar {
   background-color: var(--color-secondary-dark-4);
 }
 

web_src/css/shared/flex-list.css

@@ -1,40 +1,61 @@
-.flex-list {
-  list-style: none;
+/* can be used to replace "ui relaxed list" or "tw-flex tw-flex-col tw-gap-xxx" when we need more flexible layout */
+.flex-relaxed-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-block);
 }
 
-.flex-item {
+.flex-relaxed-list > .divider {
+  margin: 0;
+}
+
+/* items have dividers between them, the dividers align with items (use parent padding) */
+.flex-divided-list {
+  list-style: none;
   display: flex;
-  gap: 8px;
-  align-items: flex-start;
+  flex-direction: column;
+}
+
+.flex-divided-list > .item {
   padding: 10px 0;
 }
 
-.flex-item .flex-item-leading {
+.flex-divided-list > .item + .item {
+  border-top: 1px solid var(--color-secondary);
+}
+
+.items-with-main > .item {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.items-with-main > .item .item-leading {
   display: flex;
   align-items: flex-start;
 }
 
-.flex-item .flex-item-main {
+.items-with-main > .item .item-main {
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   flex-grow: 1;
-  flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */
+  flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
 }
 
-.flex-item-header {
+.items-with-main > .item .item-header {
   display: flex;
   gap: .25rem;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
-.flex-item a:not(.label, .button):hover {
+.items-with-main > .item a:not(.label, .button):hover {
   color: var(--color-primary) !important;
 }
 
-.flex-item .flex-item-trailing {
+.items-with-main > .item .item-trailing {
   display: flex;
   gap: 0.5rem;
   align-items: center;
@@ -43,7 +64,7 @@
   justify-content: end;
 }
 
-.flex-item .flex-item-title {
+.items-with-main > .item .item-title {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -58,12 +79,12 @@
   min-width: 0;
 }
 
-.flex-item .flex-item-title a {
+.items-with-main > .item .item-title a {
   color: var(--color-text);
   overflow-wrap: anywhere;
 }
 
-.flex-item .flex-item-body {
+.items-with-main > .item .item-body {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -72,32 +93,40 @@
   overflow-wrap: anywhere;
 }
 
-.flex-item .flex-item-body a {
+.items-with-main > .item .item-body a {
   color: inherit;
   overflow-wrap: anywhere;
 }
 
-.flex-list > .flex-item + .flex-item {
-  border-top: 1px solid var(--color-secondary);
+/* special rules to make the list work with existing UI elements */
+.container-segmented > .flex-divided-list > .item {
+  padding-left: 1em;
+  padding-right: 1em;
 }
 
-/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `tw-hidden` siblings).
-Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */
-.flex-list.flex-space-fitted > .flex-item:first-child,
-.ui.segment > .flex-list > .flex-item:first-child {
+.ui.segment.fitted > .flex-divided-list > .item {
+  padding: 1em;
+}
+
+.container-padded > .flex-divided-list > .item:first-child,
+.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child {
   padding-top: 0;
 }
 
-.flex-list.flex-space-fitted > .flex-item:last-child,
-.ui.segment > .flex-list > .flex-item:last-child {
+.container-padded > .flex-divided-list > .item:last-child,
+.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child {
   padding-bottom: 0;
 }
 
 /* If there is a divider besides the flex-list, some padding/margin are not needs */
-.divider + .flex-list > .flex-item:first-child {
+.divider + .flex-divided-list > .item:first-child {
   padding-top: 0;
 }
 
-.flex-list + .divider {
+.flex-divided-list + .divider {
   margin-top: 0;
 }
+
+.container-padded > .flex-divided-list + .divider {
+  margin-top: 10px;
+}

web_src/js/features/repo-settings-branches.test.ts

@@ -13,13 +13,13 @@ vi.mock('../modules/sortable.ts', () => ({
 
 const branchesHTML = `
   <div id="protected-branches-list" data-update-priority-url="some/repo/branches/priority">
-    <div class="flex-item tw-items-center item" data-id="1">
+    <div class="item" data-id="1">
       <div class="drag-handle"></div>
     </div>
-    <div class="flex-item tw-items-center item" data-id="2">
+    <div class="item" data-id="2">
       <div class="drag-handle"></div>
     </div>
-    <div class="flex-item tw-items-center item" data-id="3">
+    <div class="item" data-id="3">
       <div class="drag-handle"></div>
     </div>
   </div>