chore: various UI problems (#38263)

1. fix dirty "list" styles for "githooks" and "webhooks"
2. fix git hook edit page layout
3. fix codemirror editor styles
4. fix incorrect "ui attached header" width

templates/repo/settings/githook_edit.tmpl

@@ -8,19 +8,19 @@
 				</div>
 			</h4>
 			<div class="ui attached segment">
-				<p>{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}</p>
+				{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}
+			</div>
+			<div class="ui attached fitted segment">
 				{{with .Hook}}
-					<div class="field">
-						<textarea id="content" name="content" class="tw-hidden"
-							data-code-editor-config="{{JsonUtils.EncodeToString $.CodeEditorConfig}}"
-							placeholder="{{ctx.Locale.Tr "editor.code_editor.placeholder"}}">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
-						<div class="editor-loading is-loading"></div>
-					</div>
-					<div class="inline field">
-						<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.update_githook"}}</button>
-					</div>
+					<textarea id="content" name="content" class="tw-hidden"
+						data-code-editor-config="{{JsonUtils.EncodeToString $.CodeEditorConfig}}"
+						placeholder="{{ctx.Locale.Tr "editor.code_editor.placeholder"}}">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
+					<div class="editor-loading is-loading"></div>
 				{{end}}
 			</div>
+			<div class="ui attached segment">
+				<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.update_githook"}}</button>
+			</div>
 		</form>
 	</div>
 {{template "repo/settings/layout_footer" .}}

templates/repo/settings/githooks.tmpl

@@ -4,13 +4,14 @@
 			{{ctx.Locale.Tr "repo.settings.githooks"}}
 		</h4>
 		<div class="ui attached segment">
-			<div class="ui list flex-items-block">
-				<div class="item"><span>{{ctx.Locale.Tr "repo.settings.githooks_desc"}}</span></div>
+			<div>{{ctx.Locale.Tr "repo.settings.githooks_desc"}}</div>
+			{{if .Hooks}}<div class="divider"></div>{{end}}
+			<div class="flex-divided-list">
 				{{range .Hooks}}
-				<div class="item">
+				<div class="item flex-text-block">
 					<span class="{{if .IsActive}}tw-text-green{{else}}tw-text-text-light{{end}}">{{svg "octicon-dot-fill" 22}}</span>
 					<span class="gt-ellipsis tw-flex-1">{{.Name}}</span>
-					<a class="muted tw-p-2" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">{{svg "octicon-pencil"}}</a>
+					<a class="muted tw-pr-2" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">{{svg "octicon-pencil"}}</a>
 				</div>
 				{{end}}
 			</div>

templates/repo/settings/webhook/base_list.tmpl

@@ -8,17 +8,18 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="ui list flex-items-block">
-		<div class="item"><span>{{.Description}}</span></div>
+	<div>{{.Description}}</div>
+	{{if .Webhooks}}<div class="divider"></div>{{end}}
+	<div class="flex-divided-list">
 		{{range .Webhooks}}
-			<div class="item">
+			<div class="item flex-text-block">
 				<span class="{{if eq .LastStatus 1}}tw-text-green{{else if eq .LastStatus 2}}tw-text-red{{else}}tw-text-text-light{{end}}">{{svg "octicon-dot-fill" 22}}</span>
 				<div class="gt-ellipsis tw-flex-1">
 					<a title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{or .Name (ctx.Locale.Tr "repo.settings.webhook.name_empty")}}</a>
 					<span class="tw-ml-2 tw-text-grey-light">{{.URL}}</span>
 				</div>
-				<a class="muted tw-p-2" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
-				<a class="tw-text-red tw-p-2 link-action"
+				<a class="muted" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
+				<a class="tw-text-red tw-pr-2 link-action"
 					data-url="{{$.Link}}/delete?id={{.ID}}"
 					data-modal-confirm="{{ctx.Locale.Tr "repo.settings.webhook_deletion_desc"}}"
 				>{{svg "octicon-trash"}}</a>

templates/repo/settings/webhook/history.tmpl

@@ -14,7 +14,7 @@
 		{{end}}
 	</h4>
 	<div class="ui attached segment">
-		<div class="ui list">
+		<div class="flex-divided-list">
 			{{range .History}}
 				<div class="item">
 					<div class="flex-left-right">
@@ -32,7 +32,7 @@
 							{{DateUtils.TimeSince .Delivered}}
 						</span>
 					</div>
-					<div class="info tw-hidden" id="info-{{.ID}}">
+					<div class="info tw-hidden tw-mt-2" id="info-{{.ID}}">
 						<div class="ui top attached tabular menu" data-global-init="initTabSwitcher">
 							<a class="item active" data-tab="request-{{.ID}}">
 								{{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.request")}}

web_src/css/admin.css

@@ -1,9 +1,3 @@
-.admin.hooks .list > .item:not(:first-child) {
-  border-top: 1px solid var(--color-secondary);
-  padding: 0.25rem 1rem;
-  margin: 12px -1rem -1rem;
-}
-
 .admin dl.admin-dl-horizontal {
   padding: 1em;
   margin: 0;

web_src/css/modules/codeeditor.css

@@ -13,31 +13,33 @@
   height: 90vh;
 }
 
-.edit.githook .code-editor-container {
-  border: 1px solid var(--color-secondary);
+.code-editor-container {
+  position: relative; /* for command panel */
+  background-color: var(--color-code-bg); /* fully colorize the container and editor */
 }
 
-.code-editor-container {
-  position: relative;
-  min-height: 90vh;
+.ui.bottom.attached.segment .code-editor-container,
+.ui.bottom.attached.segment .code-editor-container .cm-scroller {
+  border-radius: 0 0 var(--border-radius) var(--border-radius); /* avoid overflow parent's border with radius */
 }
 
 /* editor layout */
 .code-editor-container .cm-editor {
   color: var(--color-text);
-  background-color: var(--color-code-bg);
   font-family: var(--fonts-monospace);
   font-size: 12px;
-  max-height: 90vh;
+  /* it was written as "min-height: 90vh; max-height: 90vh", so maybe the author prefer to always use about 90vh.
+     here, minus 80px to keep spaces for the top toolbar */
+  height: max(200px, calc(95vh - 80px));
 }
 
-.code-editor-container .cm-editor,
-.code-editor-container .cm-editor .cm-scroller {
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
+.code-editor-container .cm-editor.cm-focused {
+  outline: none; /* don't show the default focus outline when the editor gets focused */
 }
 
 .code-editor-container .cm-content {
   caret-color: var(--color-caret);
+  padding: 0; /* avoid the small top and bottom padding */
 }
 
 .code-editor-container .cm-cursor,

web_src/css/modules/header.css

@@ -93,6 +93,8 @@ h4.ui.header .sub.header {
   background: var(--color-box-header);
   padding: 0.78571429rem 1rem;
   margin: 0 -1px;
+  width: calc(100% + 2px);
+  max-width: calc(100% + 2px); /* the same as "ui attached segment" */
   border-radius: 0;
   border: 1px solid var(--color-secondary);
 }

web_src/css/modules/menu.css

@@ -27,6 +27,7 @@
 .ui.menu:not(.vertical) .item {
   display: flex;
   align-items: center;
+  gap: var(--gap-inline);
 }
 
 .ui.menu .item {

web_src/css/repo.css

@@ -1200,38 +1200,6 @@ td .commit-summary {
   }
 }
 
-.settings.webhooks .list > .item:not(:first-child),
-.settings.githooks .list > .item:not(:first-child),
-.settings.actions .list > .item:not(:first-child) {
-  padding: 0.25rem 1rem;
-  margin: 12px -1rem -1rem;
-}
-
-.settings .list > .item:not(:first-child) {
-  border-top: 1px solid var(--color-secondary);
-  padding: 1rem;
-  margin: 16px -1rem -1rem;
-}
-
-.settings .list > .item > .svg {
-  display: table-cell;
-}
-
-.settings .list > .item > .svg + .content {
-  display: table-cell;
-  padding: 0 0 0 0.5em;
-  vertical-align: top;
-}
-
-.settings .list > .item .info {
-  margin-top: 10px;
-}
-
-.settings .list > .item .info .tab.segment {
-  border: 0;
-  padding: 10px 0 0;
-}
-
 .comment:target .comment-container {
   border-color: var(--color-primary) !important;
   box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;

web_src/css/repo/file-view.css

@@ -1,7 +1,5 @@
 .file-view-container {
   padding: 0 !important; /* the file-view itself provides padding */
-  width: 100% !important; /* override fomantic's "100% + 2px" */
-  max-width: 100% !important;
 }
 
 .file-view tr.active .lines-num,