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>

2 files changed, 61 insertions, 68 deletions

diff --git a/templates/admin/dashboard.tmpl b/templates/admin/dashboard.tmpl
index 93fcae4ca4..0aa95c0e73 100644
--- a/templates/admin/dashboard.tmpl
+++ b/templates/admin/dashboard.tmpl
@@ -19,55 +19,55 @@
 		<form method="post" action="{{AppSubUrl}}/admin">
 			{{.CsrfTokenHtml}}
 			<div class="ui attached table segment">
-				<table class="ui very basic table">
+				<table class="ui very basic table gt-px-4">
 					<tbody>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_inactive_accounts"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="delete_inactive_accounts">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="delete_inactive_accounts">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_repo_archives"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="delete_repo_archives">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="delete_repo_archives">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_missing_repos"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="delete_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="delete_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.git_gc_repos"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="git_gc_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="git_gc_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						{{if and (not .SSH.Disabled) (not .SSH.StartBuiltinServer)}}
 							<tr>
 								<td>{{.locale.Tr "admin.dashboard.resync_all_sshkeys"}}<br>
 								{{.locale.Tr "admin.dashboard.resync_all_sshkeys.desc"}}</td>
-								<td><button type="submit" class="ui green button" name="op" value="resync_all_sshkeys">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+								<td><button type="submit" class="ui green button right" name="op" value="resync_all_sshkeys">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 							</tr>
 							<tr>
 								<td>{{.locale.Tr "admin.dashboard.resync_all_sshprincipals"}}<br>
 								{{.locale.Tr "admin.dashboard.resync_all_sshprincipals.desc"}}</td>
-								<td><button type="submit" class="ui green button" name="op" value="resync_all_sshprincipals">{{svg "octicon-play" 16}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+								<td><button type="submit" class="ui green button right" name="op" value="resync_all_sshprincipals">{{svg "octicon-play" 16}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 							</tr>
 						{{end}}
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.resync_all_hooks"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="resync_all_hooks">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="resync_all_hooks">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.reinit_missing_repos"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="reinit_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="reinit_missing_repos">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.sync_external_users"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="sync_external_users">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="sync_external_users">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.repo_health_check"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="repo_health_check">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="repo_health_check">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 						<tr>
 							<td>{{.locale.Tr "admin.dashboard.delete_generated_repository_avatars"}}</td>
-							<td><button type="submit" class="ui green button" name="op" value="delete_generated_repository_avatars">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
+							<td><button type="submit" class="ui green button right" name="op" value="delete_generated_repository_avatars">{{svg "octicon-play"}} {{.locale.Tr "admin.dashboard.operation_run"}}</button></td>
 						</tr>
 					</tbody>
 				</table>
diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index bd6b74dd2b..3dbae04625 100644
--- a/templates/admin/notice.tmpl
+++ b/templates/admin/notice.tmpl
@@ -3,67 +3,60 @@
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})
 		</h4>
-		<div class="ui attached table segment">
-			<table id="notice-table" class="ui very basic select selectable table unstackable">
-				<thead>
+		<table class="ui attached basic select selectable table unstackable g-table-auto-ellipsis">
+			<thead>
+				<tr>
+					<th></th>
+					<th>ID</th>
+					<th>{{.locale.Tr "admin.notices.type"}}</th>
+					<th>{{.locale.Tr "admin.notices.desc"}}</th>
+					<th>{{.locale.Tr "admin.users.created"}}</th>
+					<th>{{.locale.Tr "admin.notices.op"}}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{{range .Notices}}
 					<tr>
-						<th></th>
-						<th>ID</th>
-						<th>{{.locale.Tr "admin.notices.type"}}</th>
-						<th>{{.locale.Tr "admin.notices.desc"}}</th>
-						<th width="100px">{{.locale.Tr "admin.users.created"}}</th>
-						<th>{{.locale.Tr "admin.notices.op"}}</th>
+						<td><div class="ui checkbox gt-db" data-id="{{.ID}}"><input type="checkbox"></div></td>
+						<td>{{.ID}}</td>
+						<td>{{$.locale.Tr .TrStr}}</td>
+						<td class="view-detail auto-ellipsis" style="width: 80%;"><span class="notice-description">{{.Description}}</span></td>
+						<td nowrap>{{DateTime "short" .CreatedUnix}}</td>
+						<td class="view-detail"><a href="#">{{svg "octicon-note" 16}}</a></td>
 					</tr>
-				</thead>
-				<tbody>
-					{{range .Notices}}
+				{{end}}
+			</tbody>
+			{{if .Notices}}
+				<tfoot>
 						<tr>
-							<td class="collapsing">
-								<div class="ui fitted checkbox" data-id="{{.ID}}">
-									<input type="checkbox">
-								</div>
-							</td>
-							<td>{{.ID}}</td>
-							<td>{{$.locale.Tr .TrStr}}</td>
-							<td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td>
-							<td>{{DateTime "short" .CreatedUnix}}</td>
-							<td><a href="#">{{svg "octicon-note" 16 "view-detail"}}</a></td>
-						</tr>
-					{{end}}
-				</tbody>
-				{{if .Notices}}
-					<tfoot class="full-width">
-							<tr>
-								<th></th>
-								<th colspan="5">
-									<form class="ui right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
-										{{.CsrfTokenHtml}}
-										<button type="submit" class="ui red small button">{{.locale.Tr "admin.notices.delete_all"}}</button>
-									</form>
-									<div class="ui floating upward dropdown small button">{{/* TODO: Make this dropdown accessible */}}
-										<span class="text">{{.locale.Tr "admin.notices.operations"}}</span>
-										<div class="menu">
-											<div class="item select action" data-action="select-all">
-												{{.locale.Tr "admin.notices.select_all"}}
-											</div>
-											<div class="item select action" data-action="deselect-all">
-												{{.locale.Tr "admin.notices.deselect_all"}}
-											</div>
-											<div class="item select action" data-action="inverse">
-												{{.locale.Tr "admin.notices.inverse_selection"}}
-											</div>
+							<th></th>
+							<th colspan="5">
+								<form class="ui right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
+									{{.CsrfTokenHtml}}
+									<button type="submit" class="ui red small button">{{.locale.Tr "admin.notices.delete_all"}}</button>
+								</form>
+								<div class="ui floating upward dropdown small button">{{/* TODO: Make this dropdown accessible */}}
+									<span class="text">{{.locale.Tr "admin.notices.operations"}}</span>
+									<div class="menu">
+										<div class="item select action" data-action="select-all">
+											{{.locale.Tr "admin.notices.select_all"}}
+										</div>
+										<div class="item select action" data-action="deselect-all">
+											{{.locale.Tr "admin.notices.deselect_all"}}
+										</div>
+										<div class="item select action" data-action="inverse">
+											{{.locale.Tr "admin.notices.inverse_selection"}}
 										</div>
 									</div>
-									<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="{{.Link}}?page={{.Page.Paginater.Current}}">
-										{{.locale.Tr "admin.notices.delete_selected"}}
-									</button>
-								</th>
-							</tr>
-					</tfoot>
-				{{end}}
-			</table>
-		</div>
-
+								</div>
+								<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="{{.Link}}?page={{.Page.Paginater.Current}}">
+									{{.locale.Tr "admin.notices.delete_selected"}}
+								</button>
+							</th>
+						</tr>
+				</tfoot>
+			{{end}}
+		</table>
 		{{template "base/paginate" .}}
 	</div>