From c16ae1ab395dd31c3a1e35f3c21ce656446808ea Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 6 May 2024 14:32:05 +0800
Subject: [PATCH] Fix some UI problems (install) (#30854)

(cherry picked from commit ce8b11ae131bef6cd7df0849ed39da7984953a4b)
---
 templates/install.tmpl  | 7 ++++---
 web_src/css/install.css | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/templates/install.tmpl b/templates/install.tmpl
index d49de33a3f..682e1e6511 100644
--- a/templates/install.tmpl
+++ b/templates/install.tmpl
@@ -174,7 +174,7 @@
 						<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
 							<label for="smtp_from">{{ctx.Locale.Tr "install.smtp_from"}}</label>
 							<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
-							<span class="help">{{ctx.Locale.Tr "install.smtp_from_helper"}}</span>
+							<span class="help">{{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}</span>
 						</div>
 						<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
 							<label for="smtp_user">{{ctx.Locale.Tr "install.mailer_user"}}</label>
@@ -320,6 +320,8 @@
 						</div>
 					</details>
 
+					<div class="divider"></div>
+
 					{{if .EnvConfigKeys}}
 					<!-- Environment Config -->
 					<h4 class="ui dividing header">{{ctx.Locale.Tr "install.env_config_keys"}}</h4>
@@ -333,12 +335,11 @@
 					</div>
 					{{end}}
 
-					<div class="divider"></div>
 					<div class="inline field">
 						<div class="right-content">
 							{{ctx.Locale.Tr "install.config_location_hint"}} {{.CustomConfFile}}
 						</div>
-						<div class="right-content tw-mt-2">
+						<div class="tw-mt-4 tw-mb-2 tw-text-center">
 							<button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button>
 						</div>
 					</div>
diff --git a/web_src/css/install.css b/web_src/css/install.css
index ee2395e6c5..7ab729405e 100644
--- a/web_src/css/install.css
+++ b/web_src/css/install.css
@@ -13,8 +13,7 @@
 .page-content.install .ui.form .field > .help,
 .page-content.install .ui.form .field > .ui.checkbox:first-child,
 .page-content.install .ui.form .field > .right-content {
-  margin-left: 30%;
-  padding-left: 5px;
+  margin-left: calc(30% + 5px);
   width: auto;
 }
 
@@ -24,10 +23,11 @@
 }
 
 .page-content.install form.ui.form details.optional.field[open] {
-  border-bottom: 1px dashed var(--color-secondary);
   padding-bottom: 10px;
 }
-
+.page-content.install form.ui.form details.optional.field[open]:not(:last-child) {
+  border-bottom: 1px dashed var(--color-secondary);
+}
 .page-content.install form.ui.form details.optional.field[open] summary {
   margin-bottom: 10px;
 }