From 6dbcf6fbc5c3c9b7f0ee396b489f0e804d39972c Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 27 Jun 2023 17:14:45 +0800
Subject: [PATCH] Fix admin-dl-horizontal (#25512)

![image](https://github.com/go-gitea/gitea/assets/2114189/fb731e07-da30-4470-8200-73b5ca8b78f1)


![image](https://github.com/go-gitea/gitea/assets/2114189/85930b6f-5df7-437f-863f-423f3b81dd26)

---------

Co-authored-by: HesterG <hestergong@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
---
 templates/admin/config.tmpl    | 24 +++++++++++------------
 templates/admin/dashboard.tmpl |  2 +-
 web_src/css/admin.css          | 35 +++++++++++++++-------------------
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/templates/admin/config.tmpl b/templates/admin/config.tmpl
index 2ddc0c1ac..17fb2444d 100644
--- a/templates/admin/config.tmpl
+++ b/templates/admin/config.tmpl
@@ -4,7 +4,7 @@
 			{{.locale.Tr "admin.config.server_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.app_name"}}</dt>
 				<dd>{{AppName}}</dd>
 				<dt>{{.locale.Tr "admin.config.app_ver"}}</dt>
@@ -53,7 +53,7 @@
 			{{.locale.Tr "admin.config.ssh_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.ssh_enabled"}}</dt>
 				<dd>{{if not .SSH.Disabled}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{if not .SSH.Disabled}}
@@ -88,7 +88,7 @@
 			{{.locale.Tr "admin.config.lfs_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.lfs_enabled"}}</dt>
 				<dd>{{if .LFS.StartServer}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{if .LFS.StartServer}}
@@ -104,7 +104,7 @@
 			{{.locale.Tr "admin.config.db_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.db_type"}}</dt>
 				<dd>{{.DbCfg.Type}}</dd>
 				{{if not (eq .DbCfg.Type "sqlite3")}}
@@ -132,7 +132,7 @@
 			{{.locale.Tr "admin.config.service_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.register_email_confirm"}}</dt>
 				<dd>{{if .Service.RegisterEmailConfirm}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.locale.Tr "admin.config.disable_register"}}</dt>
@@ -186,7 +186,7 @@
 			{{.locale.Tr "admin.config.webhook_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.queue_length"}}</dt>
 				<dd>{{.Webhook.QueueLength}}</dd>
 				<dt>{{.locale.Tr "admin.config.deliver_timeout"}}</dt>
@@ -200,7 +200,7 @@
 			{{.locale.Tr "admin.config.mailer_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.mailer_enabled"}}</dt>
 				<dd>{{if .MailerEnabled}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				{{if .MailerEnabled}}
@@ -249,7 +249,7 @@
 			{{.locale.Tr "admin.config.cache_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.cache_adapter"}}</dt>
 				<dd>{{.CacheAdapter}}</dd>
 				{{if eq .CacheAdapter "memory"}}
@@ -269,7 +269,7 @@
 			{{.locale.Tr "admin.config.session_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.session_provider"}}</dt>
 				<dd>{{.SessionConfig.Provider}}</dd>
 				<dt>{{.locale.Tr "admin.config.provider_config"}}</dt>
@@ -289,7 +289,7 @@
 			{{.locale.Tr "admin.config.picture_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.disable_gravatar"}}</dt>
 				<dd>
 					<div class="ui toggle checkbox">
@@ -310,7 +310,7 @@
 			{{.locale.Tr "admin.config.git_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.config.git_disable_diff_highlight"}}</dt>
 				<dd>{{if .Git.DisableDiffHighlight}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
 				<dt>{{.locale.Tr "admin.config.git_max_diff_lines"}}</dt>
@@ -341,7 +341,7 @@
 			{{.locale.Tr "admin.config.log_config"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				{{if .Loggers.xorm.IsEnabled}}
 					<dt>{{$.locale.Tr "admin.config.xorm_log_sql"}}</dt>
 					<dd>{{if $.LogSQL}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</dd>
diff --git a/templates/admin/dashboard.tmpl b/templates/admin/dashboard.tmpl
index 20cf3ba7f..9d503a19b 100644
--- a/templates/admin/dashboard.tmpl
+++ b/templates/admin/dashboard.tmpl
@@ -70,7 +70,7 @@
 			{{.locale.Tr "admin.dashboard.system_status"}}
 		</h4>
 		<div class="ui attached table segment">
-			<dl class="dl-horizontal admin-dl-horizontal">
+			<dl class="admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.dashboard.server_uptime"}}</dt>
 				<dd><relative-time format="duration" datetime="{{.SysStatus.StartTime}}">{{.SysStatus.StartTime}}</relative-time></dd>
 				<dt>{{.locale.Tr "admin.dashboard.current_goroutine"}}</dt>
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index 0a2a88f14..58e052735 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -15,32 +15,27 @@
   flex-wrap: wrap;
 }
 
-.admin dl.admin-dl-horizontal dd {
-  margin-left: auto;
-  width: calc(100% - 245px);
-}
-
-@media (max-width: 767.98px) {
-  .admin dl.admin-dl-horizontal dd {
-    width: calc(100% - 185px);
-  }
-}
-
-/* divider needs explicit width to become visible here */
+/* divider needs explicit width because the parent container is "display: flex" */
 .admin dl.admin-dl-horizontal .ui.divider {
   width: 100%;
 }
 
-.admin dl.admin-dl-horizontal dt {
-  font-weight: var(--font-weight-semibold);
-  width: 220px;
-  margin-right: 5px;
+.admin dl.admin-dl-horizontal dt,
+.admin dl.admin-dl-horizontal dd {
+  line-height: 1;
+  padding: 5px 0;
 }
 
-@media (max-width: 767.98px) {
-  .admin dl.admin-dl-horizontal dt {
-    width: 160px;
-  }
+.admin dl.admin-dl-horizontal dt {
+  width: 300px;
+  max-width: calc(100% - 100px - 1em);
+  font-weight: var(--font-weight-semibold);
+}
+
+.admin dl.admin-dl-horizontal dd {
+  margin-left: auto;
+  width: calc(100% - 300px - 1em);
+  min-width: 100px;
 }
 
 .admin code,