From e610b0389aa567218082b0314b93af06301941c1 Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Mon, 3 Jul 2023 17:16:58 -0400
Subject: [PATCH] Fix UI misalignment on user setting page (#25629) (#25656)

Backport #25629 by @wxiaoguang

Fix #25628

Diff with ignoring space:
https://github.com/go-gitea/gitea/pull/25629/files?diff=unified&w=1

The "modal" shouldn't appear between "ui attached segment", otherwise
these segments lose margin-top.

After the fix:

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/ac15e73d-4ca8-416a-950d-ffc912c6ab61)


![image](https://github.com/go-gitea/gitea/assets/2114189/eb431336-4d21-4e44-8beb-8919595a83c8)


![image](https://github.com/go-gitea/gitea/assets/2114189/dffaed88-5ba2-419d-a241-24cb200f757c)


![image](https://github.com/go-gitea/gitea/assets/2114189/e8c5a03e-e16a-4c94-a1a5-7845d4e1a824)

</details>

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/user/settings/account.tmpl          | 38 ++++++++-----------
 .../settings/applications_oauth2_list.tmpl    | 23 +++++------
 templates/user/settings/grants_oauth2.tmpl    | 18 ++++-----
 .../user/settings/security/accountlinks.tmpl  | 18 ++++-----
 templates/user/settings/security/openid.tmpl  | 18 ++++-----
 templates/user/settings/security/twofa.tmpl   | 18 ++++-----
 .../user/settings/security/webauthn.tmpl      | 19 +++++-----
 web_src/css/repo.css                          |  4 --
 8 files changed, 73 insertions(+), 83 deletions(-)

diff --git a/templates/user/settings/account.tmpl b/templates/user/settings/account.tmpl
index 01f70e4cc2..0b57720c96 100644
--- a/templates/user/settings/account.tmpl
+++ b/templates/user/settings/account.tmpl
@@ -39,32 +39,26 @@
 			{{.locale.Tr "settings.manage_emails"}}
 		</h4>
 		<div class="ui attached segment">
-			<div class="ui email list">
+			<div class="ui list">
 				{{if $.EnableNotifyMail}}
 				<div class="item">
+					<div class="gt-mb-3">{{.locale.Tr "settings.email_desc"}}</div>
 					<form action="{{AppSubUrl}}/user/settings/account/email" class="ui form" method="post">
-						{{.locale.Tr "settings.email_desc"}}
-						<div class="right floated content">
-							<div class="field">
-								<button class="ui green button">{{$.locale.Tr "settings.email_notifications.submit"}}</button>
-							</div>
-						</div>
-						<div class="right floated content">
-							{{$.CsrfTokenHtml}}
-							<input name="_method" type="hidden" value="NOTIFICATION">
-							<div class="field">
-								<div class="ui selection dropdown" tabindex="0">
-									<input name="preference" type="hidden" value="{{.EmailNotificationsPreference}}">
-									{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-									<div class="text"></div>
-									<div class="menu">
-										<div data-value="enabled" class="{{if eq .EmailNotificationsPreference "enabled"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.enable"}}</div>
-										<div data-value="andyourown" class="{{if eq .EmailNotificationsPreference "andyourown"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.andyourown"}}</div>
-										<div data-value="onmention" class="{{if eq .EmailNotificationsPreference "onmention"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.onmention"}}</div>
-										<div data-value="disabled" class="{{if eq .EmailNotificationsPreference "disabled"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.disable"}}</div>
-									</div>
+						{{$.CsrfTokenHtml}}
+						<input name="_method" type="hidden" value="NOTIFICATION">
+						<div class="gt-df gt-fw gt-gap-3">
+							<div class="ui selection dropdown">
+								<input name="preference" type="hidden" value="{{.EmailNotificationsPreference}}">
+								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+								<div class="text"></div>
+								<div class="menu">
+									<div data-value="enabled" class="{{if eq .EmailNotificationsPreference "enabled"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.enable"}}</div>
+									<div data-value="andyourown" class="{{if eq .EmailNotificationsPreference "andyourown"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.andyourown"}}</div>
+									<div data-value="onmention" class="{{if eq .EmailNotificationsPreference "onmention"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.onmention"}}</div>
+									<div data-value="disabled" class="{{if eq .EmailNotificationsPreference "disabled"}}active selected {{end}}item">{{$.locale.Tr "settings.email_notifications.disable"}}</div>
 								</div>
 							</div>
+							<button class="ui green button">{{$.locale.Tr "settings.email_notifications.submit"}}</button>
 						</div>
 					</form>
 				</div>
@@ -102,7 +96,7 @@
 								</form>
 							</div>
 						{{end}}
-						<div class="content">
+						<div class="content gt-py-3">
 							<strong>{{.Email}}</strong>
 							{{if .IsPrimary}}
 								<div class="ui primary label">{{$.locale.Tr "settings.primary"}}</div>
diff --git a/templates/user/settings/applications_oauth2_list.tmpl b/templates/user/settings/applications_oauth2_list.tmpl
index e18c7f56b8..3ffe317512 100644
--- a/templates/user/settings/applications_oauth2_list.tmpl
+++ b/templates/user/settings/applications_oauth2_list.tmpl
@@ -22,7 +22,19 @@
 			</div>
 		{{end}}
 	</div>
+
+	<div class="ui g-modal-confirm delete modal" id="remove-gitea-oauth2-application">
+		<div class="header">
+			{{svg "octicon-trash"}}
+			{{.locale.Tr "settings.remove_oauth2_application"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.oauth2_application_remove_description"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
+	</div>
 </div>
+
 <div class="ui attached bottom segment">
 	<h5 class="ui top header">
 		{{.locale.Tr "settings.create_oauth2_application"}}
@@ -46,14 +58,3 @@
 		</button>
 	</form>
 </div>
-
-<div class="ui g-modal-confirm delete modal" id="remove-gitea-oauth2-application">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{.locale.Tr "settings.remove_oauth2_application"}}
-	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.oauth2_application_remove_description"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
-</div>
diff --git a/templates/user/settings/grants_oauth2.tmpl b/templates/user/settings/grants_oauth2.tmpl
index 8dd9ca2119..b769020c62 100644
--- a/templates/user/settings/grants_oauth2.tmpl
+++ b/templates/user/settings/grants_oauth2.tmpl
@@ -26,15 +26,15 @@
 			</div>
 		{{end}}
 	</div>
-</div>
 
-<div class="ui g-modal-confirm delete modal" id="revoke-gitea-oauth2-grant">
-	<div class="header">
-		{{svg "octicon-shield" 16 "gt-mr-2"}}
-		{{.locale.Tr "settings.revoke_oauth2_grant"}}
+	<div class="ui g-modal-confirm delete modal" id="revoke-gitea-oauth2-grant">
+		<div class="header">
+			{{svg "octicon-shield" 16 "gt-mr-2"}}
+			{{.locale.Tr "settings.revoke_oauth2_grant"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.revoke_oauth2_grant_description"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.revoke_oauth2_grant_description"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
 </div>
diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl
index bcf432f690..76669a1012 100644
--- a/templates/user/settings/security/accountlinks.tmpl
+++ b/templates/user/settings/security/accountlinks.tmpl
@@ -39,15 +39,15 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
 
-<div class="ui g-modal-confirm delete modal" id="delete-account-link">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{.locale.Tr "settings.remove_account_link"}}
+	<div class="ui g-modal-confirm delete modal" id="delete-account-link">
+		<div class="header">
+			{{svg "octicon-trash"}}
+			{{.locale.Tr "settings.remove_account_link"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.remove_account_link_desc"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.remove_account_link_desc"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
 </div>
diff --git a/templates/user/settings/security/openid.tmpl b/templates/user/settings/security/openid.tmpl
index 2719b3b495..de1099ff44 100644
--- a/templates/user/settings/security/openid.tmpl
+++ b/templates/user/settings/security/openid.tmpl
@@ -49,15 +49,15 @@
 			{{.locale.Tr "settings.add_openid"}}
 		</button>
 	</form>
-</div>
 
-<div class="ui g-modal-confirm delete modal" id="delete-openid">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{.locale.Tr "settings.openid_deletion"}}
+	<div class="ui g-modal-confirm delete modal" id="delete-openid">
+		<div class="header">
+			{{svg "octicon-trash"}}
+			{{.locale.Tr "settings.openid_deletion"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.openid_deletion_desc"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.openid_deletion_desc"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
 </div>
diff --git a/templates/user/settings/security/twofa.tmpl b/templates/user/settings/security/twofa.tmpl
index 43f324f40b..f10dbf0b68 100644
--- a/templates/user/settings/security/twofa.tmpl
+++ b/templates/user/settings/security/twofa.tmpl
@@ -21,15 +21,15 @@
 		<a class="ui green button" href="{{AppSubUrl}}/user/settings/security/two_factor/enroll">{{$.locale.Tr "settings.twofa_enroll"}}</a>
 	</div>
 	{{end}}
-</div>
 
-<div class="ui g-modal-confirm delete modal" id="disable-twofa">
-	<div class="header">
-		{{svg "octicon-trash"}}
-		{{.locale.Tr "settings.twofa_disable"}}
+	<div class="ui g-modal-confirm delete modal" id="disable-twofa">
+		<div class="header">
+			{{svg "octicon-trash"}}
+			{{.locale.Tr "settings.twofa_disable"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.twofa_disable_desc"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.twofa_disable_desc"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
 </div>
diff --git a/templates/user/settings/security/webauthn.tmpl b/templates/user/settings/security/webauthn.tmpl
index ec1df7cdcd..16551307c1 100644
--- a/templates/user/settings/security/webauthn.tmpl
+++ b/templates/user/settings/security/webauthn.tmpl
@@ -24,15 +24,14 @@
 		</div>
 		<button id="register-webauthn" class="ui green button">{{svg "octicon-key"}} {{.locale.Tr "settings.webauthn_register_key"}}</button>
 	</div>
-</div>
-
-<div class="ui g-modal-confirm delete modal" id="delete-registration">
-	<div class="header">
-		{{svg "octicon-trash"}}
-	{{.locale.Tr "settings.webauthn_delete_key"}}
+	<div class="ui g-modal-confirm delete modal" id="delete-registration">
+		<div class="header">
+			{{svg "octicon-trash"}}
+			{{.locale.Tr "settings.webauthn_delete_key"}}
+		</div>
+		<div class="content">
+			<p>{{.locale.Tr "settings.webauthn_delete_key_desc"}}</p>
+		</div>
+		{{template "base/modal_actions_confirm" .}}
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "settings.webauthn_delete_key_desc"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
 </div>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index d7bd08079b..eb45a2229e 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2365,10 +2365,6 @@
   color: var(--color-text-light-2);
 }
 
-.settings .list.email > .item:not(:first-child) {
-  min-height: 60px;
-}
-
 .settings .list.collaborator > .item {
   padding: 0;
 }