Use flex classes in package settings (#26314)

Regression of #25790
Fixes #26310

---------

Co-authored-by: Giteabot <teabot@gitea.io>

templates/org/team/members.tmpl

@@ -53,17 +53,23 @@
 				</div>
 				{{if and .Invites $.IsOrganizationOwner}}
 				<h4 class="ui top attached header">{{$.locale.Tr "org.teams.invite_team_member.list"}}</h4>
-				<div class="ui bottom attached table segment members">
-					{{range .Invites}}
-						<div class="item gt-df gt-ac gt-fw">
-							<span class="gt-f1">{{.Email}}</span>
-							<form action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove_invite" method="post">
-								{{$.CsrfTokenHtml}}
-								<input type="hidden" name="iid" value="{{.ID}}">
-								<button class="ui red button">{{$.locale.Tr "org.members.remove"}}</button>
-							</form>
-						</div>
-					{{end}}
+				<div class="ui attached segment">
+					<div class="flex-list">
+						{{range .Invites}}
+							<div class="flex-item flex-item-center">
+								<div class="flex-item-main">
+									{{.Email}}
+								</div>
+								<div class="flex-item-trailing">
+									<form action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/remove_invite" method="post">
+										{{$.CsrfTokenHtml}}
+										<input type="hidden" name="iid" value="{{.ID}}">
+										<button class="ui red button">{{$.locale.Tr "org.members.remove"}}</button>
+									</form>
+								</div>
+							</div>
+						{{end}}
+					</div>
 				</div>
 				{{end}}
 			</div>

templates/package/settings.tmpl

@@ -38,28 +38,30 @@
 		<h4 class="ui top attached error header">
 			{{.locale.Tr "repo.settings.danger_zone"}}
 		</h4>
-		<div class="ui attached error table danger segment">
-			<div class="item">
-				<div class="ui right">
-					<button class="ui basic red show-modal button" data-modal="#delete-package-modal">{{.locale.Tr "packages.settings.delete"}}</button>
-				</div>
-				<div>
-					<h5>{{.locale.Tr "packages.settings.delete"}}</h5>
-					<p>{{.locale.Tr "packages.settings.delete.description"}}</p>
-				</div>
-				<div class="ui tiny modal" id="delete-package-modal">
-					<div class="header">
-						{{.locale.Tr "packages.settings.delete"}}
+		<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">{{.locale.Tr "packages.settings.delete"}}</div>
+						<div class="flex-item-body">{{.locale.Tr "packages.settings.delete.description"}}</div>
 					</div>
-					<div class="content">
-						<div class="ui warning message gt-word-break">
-							{{.locale.Tr "packages.settings.delete.notice" .PackageDescriptor.Package.Name .PackageDescriptor.Version.Version}}
+					<div class="flex-item-trailing">
+						<button class="ui basic red show-modal button" data-modal="#delete-package-modal">{{.locale.Tr "packages.settings.delete"}}</button>
+					</div>
+					<div class="ui tiny modal" id="delete-package-modal">
+						<div class="header">
+							{{.locale.Tr "packages.settings.delete"}}
+						</div>
+						<div class="content">
+							<div class="ui warning message gt-word-break">
+								{{.locale.Tr "packages.settings.delete.notice" .PackageDescriptor.Package.Name .PackageDescriptor.Version.Version}}
+							</div>
+							<form class="ui form" action="{{.Link}}" method="post">
+								{{.CsrfTokenHtml}}
+								<input type="hidden" name="action" value="delete">
+								{{template "base/modal_actions_confirm" .}}
+							</form>
 						</div>
-						<form class="ui form" action="{{.Link}}" method="post">
-							{{.CsrfTokenHtml}}
-							<input type="hidden" name="action" value="delete">
-							{{template "base/modal_actions_confirm" .}}
-						</form>
 					</div>
 				</div>
 			</div>