From f7cf7e68482d10ac07fa38c12f15b7886f97f3c7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 30 Apr 2023 19:32:07 +0200
Subject: [PATCH] Fix config list overflow and layout (#24312)

Fixes: https://github.com/go-gitea/gitea/issues/24299

<img width="531" alt="Screenshot 2023-04-24 at 21 05 40"
src="https://user-images.githubusercontent.com/115237/234091905-9db42697-87b3-40a0-bd18-9e910ad8a2ae.png">
---
 web_src/css/admin.css | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index 0c5c73823e..e7dc2ec533 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -11,23 +11,30 @@
 .admin dl.admin-dl-horizontal {
   padding: 1em;
   margin: 0;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .admin dl.admin-dl-horizontal dd {
-  margin-left: 275px;
+  margin-left: auto;
+  width: calc(100% - 245px);
 }
 
 @media (max-width: 767px) {
   .admin dl.admin-dl-horizontal dd {
-    margin-left: 5%;
+    width: calc(100% - 185px);
   }
 }
 
+/* divider needs explicit width to become visible here */
+.admin dl.admin-dl-horizontal .ui.divider {
+  width: 100%;
+}
+
 .admin dl.admin-dl-horizontal dt {
   font-weight: var(--font-weight-bold);
-  float: left;
-  width: 285px;
-  clear: left;
+  width: 220px;
+  margin-right: 5px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -35,8 +42,7 @@
 
 @media (max-width: 767px) {
   .admin dl.admin-dl-horizontal dt {
-    width: auto;
-    margin-right: 0.5em;
+    width: 160px;
   }
 }