Reduce margins on admin pages (#26026)

Reduce margins around admin boxes and reduce sidebar size from 275px to
240px. This is the same 16px margin we use on issue pages.

Before and After:
<img width="1270" alt="Screenshot 2023-07-21 at 00 28 11"
src="https://github.com/go-gitea/gitea/assets/115237/f9b0dcb0-8f7e-49b4-b130-54bf31c142fd">
<img width="1271" alt="Screenshot 2023-07-21 at 00 30 51"
src="https://github.com/go-gitea/gitea/assets/115237/ddd75d59-9ab9-4061-8989-852e89727560">

Author: silverwind

templates/admin/layout_head.tmpl

@@ -1,8 +1,8 @@
 {{template "base/head" .ctxData}}
 <div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
-	<div class="ui container stackable grid">
+	<div class="ui container admin-container">
 		{{template "admin/navbar" .ctxData}}
-		<div class="twelve wide column">
+		<div class="admin-main">
 			{{template "base/alert" .ctxData}}
 			{{/* block: admin-setting-content */}}
 

templates/admin/navbar.tmpl

@@ -1,4 +1,4 @@
-<div class="four wide column">
+<div class="admin-nav">
 	<div class="ui fluid vertical menu">
 		<div class="header item">{{.locale.Tr "settings"}}</div>
 		<a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin">

web_src/css/admin.css

@@ -1,3 +1,25 @@
+.admin-container {
+  display: flex !important;
+  gap: 16px;
+}
+
+.admin-nav {
+  width: 240px;
+}
+
+.admin-main {
+  flex: 1;
+}
+
+@media (max-width: 767.98px) {
+  .admin-container {
+    flex-direction: column;
+  }
+  .admin-nav {
+    width: auto;
+  }
+}
+
 .admin.hooks .list > .item:not(:first-child) {
   border-top: 1px solid var(--color-secondary);
   padding: 0.25rem 1rem;