Reduce margins on user settings page, introduce flex-container (#26046)

Same as https://github.com/go-gitea/gitea/pull/26026 but for the user
settings page. It introduces a new `flex-container` class and shares it
across both pages.

Before and After:
<img width="1264" alt="Screenshot 2023-07-21 at 19 35 57"
src="1358dab4-55c0-40ce-a4d5-673099304f3d">
<img width="1269" alt="Screenshot 2023-07-21 at 19 35 42"
src="34812f6d-dc65-4009-b977-90e03efdc6d1">

web_src/css/admin.css

@@ -1,26 +1,3 @@
-.admin-container {
-  margin-top: 15px;
-  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;

web_src/css/index.css

@@ -11,6 +11,7 @@
 @import "./modules/toast.css";
 @import "./modules/divider.css";
 @import "./modules/svg.css";
+@import "./modules/flexcontainer.css";
 
 @import "./shared/issuelist.css";
 @import "./shared/milestone.css";

web_src/css/modules/flexcontainer.css

@@ -0,0 +1,23 @@
+/* container for full-page content with sidebar on left */
+
+.flex-container {
+  display: flex !important;
+  gap: 16px;
+}
+
+.flex-container-nav {
+  width: 240px;
+}
+
+.flex-container-main {
+  flex: 1;
+}
+
+@media (max-width: 767.98px) {
+  .flex-container {
+    flex-direction: column;
+  }
+  .flex-container-nav {
+    width: auto;
+  }
+}