Modify width of ui container, fine tune css for settings pages and org header (#24315)

Close #24302 
Part of #24229, Follows #24246
This PR focused on CSS style fine-tune, main changes:

1. Give `.ui.ui.ui.container` a width of `1280px` with a max-width of
`calc(100vw - 64px)`, so the main contents looks better on large
devices.

2. Share styles for table elements in all levels settings pages to fix
overflow of runners table on mobile and for consistency (The headers on
mobile can be further improved, but haven't found a proper way yet).

3. Use [stackable
grid](https://fomantic-ui.com/collections/grid.html#stackable) and
[device column width](https://fomantic-ui.com/examples/responsive.html)
for responsiveness for some pages (repo/org collaborators settings
pages, org teams related page)

4. Fixed #24302 by sharing label related CSS in reporg.css

5. Fine tune repo tags settings page

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

5 files changed, 44 insertions, 58 deletions

diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index a07a63b11e..c8e17dbba9 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -4,30 +4,6 @@
   margin: 12px -1rem -1rem;
 }
 
-.admin .table.segment {
-  padding: 0;
-  font-size: 13px;
-  overflow-x: auto;
-}
-
-.admin .table.segment:not(.striped) thead th:last-child {
-  padding-right: 5px !important;
-}
-
-.admin .table.segment th {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.admin .table.segment:not(.select) th:first-of-type,
-.admin .table.segment:not(.select) td:first-of-type {
-  padding-left: 15px !important;
-}
-
-.admin .table.segment form tbody button[type="submit"] {
-  padding: 5px 8px;
-}
-
 .admin .settings .button.adopt,
 .admin .settings .button.delete {
   margin-top: -15px;
@@ -44,7 +20,7 @@
 }
 
 .admin dl.admin-dl-horizontal {
-  padding: 20px;
+  padding: 1em;
   margin: 0;
 }
 
@@ -84,27 +60,3 @@
   white-space: pre-wrap;
   word-wrap: break-word;
 }
-
-@media (max-width: 767px) {
-  .admin #notice-table .notice-description {
-    max-width: 80vw;
-  }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-  .admin #notice-table .notice-description {
-    max-width: 360px;
-  }
-}
-
-@media (min-width: 992px) and (max-width: 1200px) {
-  .admin #notice-table .notice-description {
-    max-width: 510px;
-  }
-}
-
-@media (min-width: 1201px) {
-  .admin #notice-table .notice-description {
-    max-width: 640px;
-  }
-}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 33d84bc90c..dc7942e8a2 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1183,6 +1183,12 @@ img.ui.avatar,
   padding-bottom: 80px;
 }
 
+/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
+.page-content .ui.ui.ui.container:not(.fluid) {
+  width: 1280px;
+  max-width: calc(100vw - 64px);
+}
+
 /* enable fluid page widths for medium size viewports */
 @media (min-width: 768px) and (max-width: 1200px) {
   .ui.ui.ui.container:not(.fluid) {
@@ -1190,6 +1196,13 @@ img.ui.avatar,
   }
 }
 
+@media only screen and (max-width: 767px) {
+  .page-content .ui.ui.ui.container:not(.fluid) {
+    width: auto; /* copied from semantic css */
+    max-width: 100%;
+  }
+}
+
 .following.bar {
   z-index: 900;
   left: 0;
@@ -2638,10 +2651,6 @@ table th[data-sortt-desc] .svg {
 }
 
 .labelspage .item {
-  margin-top: 0;
-  margin-right: -14px;
-  margin-left: -14px;
-  padding: 10px;
   border-bottom: 1px solid var(--color-secondary);
   border-top: none;
 }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 70ac8ff469..22a284d43c 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -2,6 +2,7 @@
 Gitea's tailwind-style CSS helper classes have `gt-` prefix.
 Gitea's private styles use `g-` prefix.
 */
+.gt-db { display: block !important; }
 .gt-df { display: flex !important; }
 .gt-di { display: inline !important; }
 .gt-dif { display: inline-flex !important; }
@@ -42,6 +43,23 @@ Gitea's private styles use `g-` prefix.
   text-overflow: ellipsis !important;
 }
 
+
+.g-table-auto-ellipsis td.auto-ellipsis {
+  position: relative;
+}
+
+.g-table-auto-ellipsis td.auto-ellipsis span {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* below class names match Tailwind CSS */
 .gt-break-all { word-break: break-all !important; }
 .gt-content-center { align-content: center !important; }
diff --git a/web_src/css/organization.css b/web_src/css/organization.css
index 42a6dcc5ea..25d4940fe5 100644
--- a/web_src/css/organization.css
+++ b/web_src/css/organization.css
@@ -40,11 +40,6 @@
   }
 }
 
-.organization .head .ui.header .org-visibility .label {
-  margin-left: 5px;
-  margin-top: 5px;
-}
-
 .organization .head .ui.header .ui.right {
   margin-top: 5px;
 }
@@ -232,6 +227,12 @@
   height: 60px;
 }
 
+@media (max-width: 767px) {
+  .organization.teams #repo-top-segment {
+    height: 100px;
+  }
+}
+
 .org-team-navbar .active.item {
   background: var(--color-box-body) !important;
 }
diff --git a/web_src/css/shared/repoorg.css b/web_src/css/shared/repoorg.css
index ee9d94bafa..7f0a805d0f 100644
--- a/web_src/css/shared/repoorg.css
+++ b/web_src/css/shared/repoorg.css
@@ -17,3 +17,9 @@
   margin-top: 14px;
   margin-bottom: 0;
 }
+
+.repository .head .ui.header .org-visibility .label,
+.organization .head .ui.header .org-visibility .label {
+  margin-left: 5px;
+  margin-top: 5px;
+}