diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 7e0dca8af2642..b93751f97eacd 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -110,8 +110,8 @@
 					{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
 					{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
 					<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
-						<h4 class="diff-file-header sticky-2nd-row ui top attached normal header tw-flex tw-items-center tw-justify-between tw-flex-wrap">
-							<div class="diff-file-name tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
+						<h4 class="diff-file-header sticky-2nd-row ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between tw-flex-wrap">
+							<div class="diff-file-name tw-flex tw-items-center tw-gap-2 tw-flex-wrap">
 								<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} tw-invisible{{end}}">
 									{{if $file.ShouldBeHidden}}
 										{{svg "octicon-chevron-right" 18}}
@@ -218,7 +218,7 @@
 
 				{{if .Diff.IsIncomplete}}
 					<div class="diff-file-box diff-box file-content gt-mt-3" id="diff-incomplete">
-						<h4 class="ui top attached normal header tw-flex tw-items-center tw-justify-between">
+						<h4 class="ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between">
 							{{ctx.Locale.Tr "repo.diff.too_many_files"}}
 							<a class="ui basic tiny button" id="diff-show-more-files" data-href="?skip-to={{.Diff.End}}&file-only=true">{{ctx.Locale.Tr "repo.diff.show_more"}}</a>
 						</h4>
diff --git a/templates/shared/search/code/results.tmpl b/templates/shared/search/code/results.tmpl
index 3bae95900644d..42e029da820d4 100644
--- a/templates/shared/search/code/results.tmpl
+++ b/templates/shared/search/code/results.tmpl
@@ -12,7 +12,7 @@
 	{{range $result := .SearchResults}}
 		{{$repo := or $.Repo (index $.RepoMaps .RepoID)}}
 		<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
-			<h4 class="ui top attached normal header tw-flex tw-flex-wrap">
+			<h4 class="ui top attached header tw-font-normal tw-flex tw-flex-wrap">
 				{{if not $.Repo}}
 					<span class="file tw-flex-1">
 						<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index cb49fa9c58a4c..226ec70386810 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -297,10 +297,6 @@ a.label,
   background-color: var(--color-markup-code-block);
 }
 
-.ui.dividing.header {
-  border-bottom-color: var(--color-secondary);
-}
-
 /* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
 .ui.input > input {
   line-height: var(--line-height-default);
@@ -576,22 +572,10 @@ ol.ui.list li,
   visibility: visible !important;
 }
 
-.ui.error.header {
-  background: var(--color-error-bg) !important;
-  color: var(--color-error-text) !important;
-  border-color: var(--color-error-border) !important;
-}
-
 .ui.error.segment {
   border-color: var(--color-error-border) !important;
 }
 
-.ui.warning.header {
-  background: var(--color-warning-bg) !important;
-  color: var(--color-warning-text) !important;
-  border-color: var(--color-warning-border) !important;
-}
-
 .ui.warning.segment {
   border-color: var(--color-warning-border) !important;
 }
@@ -1085,10 +1069,6 @@ input:-webkit-autofill:active,
   margin-bottom: 0;
 }
 
-.ui .normal.header {
-  font-weight: var(--font-weight-normal);
-}
-
 .ui .form .autofill-dummy {
   position: absolute;
   width: 1px;
@@ -1246,17 +1226,6 @@ input:-webkit-autofill:active,
   margin-right: 0;
 }
 
-.ui.icon.header svg {
-  width: 3em;
-  height: 3em;
-  float: none;
-  display: block;
-  line-height: var(--line-height-default);
-  padding: 0;
-  margin: 0 auto 0.5rem;
-  opacity: 1;
-}
-
 .ui.floating.dropdown .overflow.menu .scrolling.menu.items {
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -1284,11 +1253,6 @@ input:-webkit-autofill:active,
   border-radius: var(--border-radius);
 }
 
-.attention-header {
-  padding: 0.5em 0.75em !important;
-  color: var(--color-text) !important;
-}
-
 .attention-icon {
   margin: 2px 6px 0 0;
 }
@@ -1758,35 +1722,6 @@ a.ui.basic.label:hover {
   color: var(--color-text-light);
 }
 
-.ui.attached.header {
-  position: relative;
-  background: var(--color-box-header);
-  border-color: var(--color-secondary);
-}
-
-/* fix misaligned right buttons on box headers */
-.ui.attached.header > .ui.right {
-  position: absolute;
-  right: 0.78571429rem;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-}
-
-/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
-.ui.attached.header > .ui.right .ui.tiny.button {
-  padding: 6px 10px;
-  font-weight: var(--font-weight-normal);
-}
-
-/* if a .top.attached.header is followed by a .segment, add some margin */
-.ui.segments + .ui.top.attached.header,
-.ui.attached.segment + .ui.top.attached.header {
-  margin-top: 1rem;
-}
-
 .rss-icon {
   display: inline-flex;
   color: var(--color-text-light-1);
@@ -1842,11 +1777,6 @@ table th[data-sortt-desc] .svg {
   background: var(--color-secondary-dark-1) !important;
 }
 
-/* https://github.com/go-gitea/gitea/pull/11486 */
-.ui.sub.header {
-  text-transform: none;
-}
-
 .ui.tabular.menu {
   border-color: var(--color-secondary);
 }
@@ -1897,22 +1827,6 @@ table th[data-sortt-desc] .svg {
   height: 0;
 }
 
-.ui.header {
-  color: var(--color-text);
-}
-
-.ui.header .ui.label {
-  margin-left: 0.25rem;
-}
-
-.ui.header > .ui.label.compact {
-  margin-top: inherit;
-}
-
-.ui.header .sub.header {
-  color: var(--color-text-light-1);
-}
-
 .flash-error details code,
 .flash-warning details code {
   display: block;
diff --git a/web_src/css/index.css b/web_src/css/index.css
index bf568bff4d77a..e8df321829d37 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -14,6 +14,7 @@
 @import "./modules/svg.css";
 @import "./modules/flexcontainer.css";
 @import "./modules/message.css";
+@import "./modules/header.css";
 
 @import "./shared/flex-list.css";
 @import "./shared/milestone.css";
diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
new file mode 100644
index 0000000000000..091d536cfc56c
--- /dev/null
+++ b/web_src/css/modules/header.css
@@ -0,0 +1,171 @@
+/* based on Fomantic UI header module, with just the parts extracted that we use. If you find any
+   unused rules here after refactoring, please remove them. */
+
+.ui.header {
+  color: var(--color-text);
+  border: none;
+  margin: calc(2rem - 0.1428571428571429em) 0 1rem;
+  padding: 0;
+  font-family: var(--fonts-regular);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.28571429;
+  text-transform: none;
+}
+
+.ui.header:first-child {
+  margin-top: -0.14285714em;
+}
+
+.ui.header:last-child {
+  margin-bottom: 0;
+}
+
+.ui.header .ui.label {
+  margin-left: 0.25rem;
+  vertical-align: middle;
+}
+
+.ui.header > .ui.label.compact {
+  margin-top: inherit;
+}
+
+.ui.header .sub.header {
+  display: block;
+  font-weight: var(--font-weight-normal);
+  padding: 0;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.2;
+  color: var(--color-text-light-1);
+}
+
+.ui.header > i.icon {
+  display: table-cell;
+  opacity: 1;
+  font-size: 1.5em;
+  padding-top: 0;
+  vertical-align: middle;
+}
+
+.ui.header > i.icon:only-child {
+  display: inline-block;
+  padding: 0;
+  margin-right: 0.75rem;
+}
+
+.ui.header + p {
+  margin-top: 0;
+}
+
+h2.ui.header {
+  font-size: 1.71428571rem;
+}
+h2.ui.header .sub.header {
+  font-size: 1.14285714rem;
+}
+
+h4.ui.header {
+  font-size: 1.07142857rem;
+}
+h4.ui.header .sub.header {
+  font-size: 1rem;
+}
+
+.ui.sub.header {
+  padding: 0;
+  margin-bottom: 0.14285714rem;
+  font-weight: var(--font-weight-normal);
+  font-size: 0.85714286em;
+}
+
+.ui.icon.header svg {
+  width: 3em;
+  height: 3em;
+  float: none;
+  display: block;
+  line-height: var(--line-height-default);
+  padding: 0;
+  margin: 0 auto 0.5rem;
+  opacity: 1;
+}
+
+.ui.header:not(h1,h2,h3,h4,h5,h6) {
+  font-size: 1.28571429em;
+}
+
+.ui.attached.header {
+  position: relative;
+  background: var(--color-box-header);
+  padding: 0.78571429rem 1rem;
+  margin: 0 -1px;
+  border-radius: 0;
+  border: 1px solid var(--color-secondary);
+}
+
+.ui.attached:not(.top).header {
+  border-top: none;
+}
+
+.ui.top.attached.header {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+
+.ui.bottom.attached.header {
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+
+.ui.attached.header:not(h1,h2,h3,h4,h5,h6) {
+  font-size: 1em;
+}
+
+/* fix misaligned right buttons on box headers */
+.ui.attached.header > .ui.right {
+  position: absolute;
+  right: 0.78571429rem;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+/* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
+.ui.attached.header > .ui.right .ui.tiny.button {
+  padding: 6px 10px;
+  font-weight: var(--font-weight-normal);
+}
+
+/* if a .top.attached.header is followed by a .segment, add some margin */
+.ui.segments + .ui.top.attached.header,
+.ui.attached.segment + .ui.top.attached.header {
+  margin-top: 1rem;
+}
+
+.ui.dividing.header {
+  border-bottom-color: var(--color-secondary);
+}
+
+.ui.dividing.header .sub.header {
+  padding-bottom: 0.21428571rem;
+}
+
+.ui.dividing.header i.icon {
+  margin-bottom: 0;
+}
+
+.ui.error.header {
+  background: var(--color-error-bg) !important;
+  color: var(--color-error-text) !important;
+  border-color: var(--color-error-border) !important;
+}
+
+.ui.warning.header {
+  background: var(--color-warning-bg) !important;
+  color: var(--color-warning-text) !important;
+  border-color: var(--color-warning-border) !important;
+}
+
+.attention-header {
+  padding: 0.5em 0.75em !important;
+  color: var(--color-text) !important;
+}
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 099bb94c3969e..4d822442773a3 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -7340,741 +7340,6 @@ select.ui.dropdown {
          Theme Overrides
 *******************************/
 
-/*******************************
-         Site Overrides
-*******************************/
-/*!
- * # Fomantic-UI - Header
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Header
-*******************************/
-
-/* Standard */
-
-.ui.header {
-  border: none;
-  margin: calc(2rem - 0.1428571428571429em) 0 1rem;
-  padding: 0 0;
-  font-family: var(--fonts-regular);
-  font-weight: 500;
-  line-height: 1.28571429em;
-  text-transform: none;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.ui.header:first-child {
-  margin-top: -0.14285714em;
-}
-
-.ui.header:last-child {
-  margin-bottom: 0;
-}
-
-/*--------------
-     Sub Header
-  ---------------*/
-
-.ui.header .sub.header {
-  display: block;
-  font-weight: normal;
-  padding: 0;
-  margin: 0;
-  font-size: 1rem;
-  line-height: 1.2em;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-/*--------------
-      Icon
----------------*/
-
-.ui.header > i.icon {
-  display: table-cell;
-  opacity: 1;
-  font-size: 1.5em;
-  padding-top: 0;
-  vertical-align: middle;
-}
-
-/* With Text Node */
-
-.ui.header > i.icon:only-child {
-  display: inline-block;
-  padding: 0;
-  margin-right: 0.75rem;
-}
-
-/*-------------------
-        Image
---------------------*/
-
-.ui.header > .image:not(.icon),
-.ui.header > img {
-  display: inline-block;
-  margin-top: 0.14285714em;
-  width: 2.5em;
-  height: auto;
-  vertical-align: middle;
-}
-
-.ui.header > .image:not(.icon):only-child,
-.ui.header > img:only-child {
-  margin-right: 0.75rem;
-}
-
-/*--------------
-     Content
----------------*/
-
-.ui.header .content {
-  display: inline-block;
-  vertical-align: top;
-}
-
-/* After Image */
-
-.ui.header > img + .content,
-.ui.header > .image + .content {
-  padding-left: 0.75rem;
-  vertical-align: middle;
-}
-
-/* After Icon */
-
-.ui.header > i.icon + .content {
-  padding-left: 0.75rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-/*--------------
- Loose Coupling
----------------*/
-
-.ui.header .ui.label {
-  font-size: '';
-  margin-left: 0.5rem;
-  vertical-align: middle;
-}
-
-/* Positioning */
-
-.ui.header + p {
-  margin-top: 0;
-}
-
-/*******************************
-            Types
-*******************************/
-
-/*--------------
-     Page
----------------*/
-
-h1.ui.header {
-  font-size: 2rem;
-}
-
-h1.ui.header .sub.header {
-  font-size: 1.14285714rem;
-}
-
-h2.ui.header {
-  font-size: 1.71428571rem;
-}
-
-h2.ui.header .sub.header {
-  font-size: 1.14285714rem;
-}
-
-h3.ui.header {
-  font-size: 1.28571429rem;
-}
-
-h3.ui.header .sub.header {
-  font-size: 1rem;
-}
-
-h4.ui.header {
-  font-size: 1.07142857rem;
-}
-
-h4.ui.header .sub.header {
-  font-size: 1rem;
-}
-
-h5.ui.header {
-  font-size: 1rem;
-}
-
-h5.ui.header .sub.header {
-  font-size: 0.92857143rem;
-}
-
-h6.ui.header {
-  font-size: 0.85714286rem;
-}
-
-h6.ui.header .sub.header {
-  font-size: 0.92857143rem;
-}
-
-/*--------------
- Content Heading
----------------*/
-
-.ui.mini.header {
-  font-size: 0.85714286em;
-}
-
-.ui.mini.header .sub.header {
-  font-size: 0.92857143rem;
-}
-
-.ui.mini.sub.header {
-  font-size: 0.78571429em;
-}
-
-.ui.tiny.header {
-  font-size: 1em;
-}
-
-.ui.tiny.header .sub.header {
-  font-size: 0.92857143rem;
-}
-
-.ui.tiny.sub.header {
-  font-size: 0.78571429em;
-}
-
-.ui.small.header {
-  font-size: 1.07142857em;
-}
-
-.ui.small.header .sub.header {
-  font-size: 1rem;
-}
-
-.ui.small.sub.header {
-  font-size: 0.78571429em;
-}
-
-.ui.large.header {
-  font-size: 1.71428571em;
-}
-
-.ui.large.header .sub.header {
-  font-size: 1.14285714rem;
-}
-
-.ui.large.sub.header {
-  font-size: 0.92857143em;
-}
-
-.ui.big.header {
-  font-size: 1.85714286em;
-}
-
-.ui.big.header .sub.header {
-  font-size: 1.14285714rem;
-}
-
-.ui.big.sub.header {
-  font-size: 1em;
-}
-
-.ui.huge.header {
-  font-size: 2em;
-  min-height: 1em;
-}
-
-.ui.huge.header .sub.header {
-  font-size: 1.14285714rem;
-}
-
-.ui.huge.sub.header {
-  font-size: 1em;
-}
-
-.ui.massive.header {
-  font-size: 2.28571429em;
-  min-height: 1em;
-}
-
-.ui.massive.header .sub.header {
-  font-size: 1.42857143rem;
-}
-
-.ui.massive.sub.header {
-  font-size: 1.14285714em;
-}
-
-/*--------------
-     Sub Heading
-  ---------------*/
-
-.ui.sub.header {
-  padding: 0;
-  margin-bottom: 0.14285714rem;
-  font-weight: 500;
-  font-size: 0.85714286em;
-  text-transform: uppercase;
-  color: '';
-}
-
-/*-------------------
-          Icon
-  --------------------*/
-
-.ui.icon.header {
-  display: inline-block;
-  text-align: center;
-  margin: 2rem 0 1rem;
-}
-
-.ui.icon.header:after {
-  content: '';
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.ui.icon.header:first-child {
-  margin-top: 0;
-}
-
-.ui.icon.header > i.icon {
-  float: none;
-  display: block;
-  width: auto;
-  height: auto;
-  line-height: 1;
-  padding: 0;
-  font-size: 3em;
-  margin: 0 auto 0.5rem;
-  opacity: 1;
-}
-
-.ui.icon.header .corner.icon {
-  font-size: calc(3em * 0.45);
-}
-
-.ui.icon.header .content {
-  display: block;
-  padding: 0;
-}
-
-.ui.icon.header > i.circular.icon {
-  font-size: 2em;
-}
-
-.ui.icon.header > i.square.icon {
-  font-size: 2em;
-}
-
-.ui.block.icon.header > i.icon {
-  margin-bottom: 0;
-}
-
-.ui.icon.header.aligned {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
-}
-
-/*******************************
-            States
-*******************************/
-
-.ui.disabled.header {
-  opacity: var(--opacity-disabled);
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*-------------------
-       Colors
---------------------*/
-
-.ui.primary.header {
-  color: #2185D0;
-}
-
-a.ui.primary.header:hover {
-  color: #1678c2;
-}
-
-.ui.primary.dividing.header {
-  border-bottom: 2px solid #2185D0;
-}
-
-.ui.secondary.header {
-  color: #1B1C1D;
-}
-
-a.ui.secondary.header:hover {
-  color: #27292a;
-}
-
-.ui.secondary.dividing.header {
-  border-bottom: 2px solid #1B1C1D;
-}
-
-.ui.red.header {
-  color: #DB2828;
-}
-
-a.ui.red.header:hover {
-  color: #d01919;
-}
-
-.ui.red.dividing.header {
-  border-bottom: 2px solid #DB2828;
-}
-
-.ui.orange.header {
-  color: #F2711C;
-}
-
-a.ui.orange.header:hover {
-  color: #f26202;
-}
-
-.ui.orange.dividing.header {
-  border-bottom: 2px solid #F2711C;
-}
-
-.ui.yellow.header {
-  color: #FBBD08;
-}
-
-a.ui.yellow.header:hover {
-  color: #eaae00;
-}
-
-.ui.yellow.dividing.header {
-  border-bottom: 2px solid #FBBD08;
-}
-
-.ui.olive.header {
-  color: #B5CC18;
-}
-
-a.ui.olive.header:hover {
-  color: #a7bd0d;
-}
-
-.ui.olive.dividing.header {
-  border-bottom: 2px solid #B5CC18;
-}
-
-.ui.green.header {
-  color: #21BA45;
-}
-
-a.ui.green.header:hover {
-  color: #16ab39;
-}
-
-.ui.green.dividing.header {
-  border-bottom: 2px solid #21BA45;
-}
-
-.ui.teal.header {
-  color: #00B5AD;
-}
-
-a.ui.teal.header:hover {
-  color: #009c95;
-}
-
-.ui.teal.dividing.header {
-  border-bottom: 2px solid #00B5AD;
-}
-
-.ui.blue.header {
-  color: #2185D0;
-}
-
-a.ui.blue.header:hover {
-  color: #1678c2;
-}
-
-.ui.blue.dividing.header {
-  border-bottom: 2px solid #2185D0;
-}
-
-.ui.violet.header {
-  color: #6435C9;
-}
-
-a.ui.violet.header:hover {
-  color: #5829bb;
-}
-
-.ui.violet.dividing.header {
-  border-bottom: 2px solid #6435C9;
-}
-
-.ui.purple.header {
-  color: #A333C8;
-}
-
-a.ui.purple.header:hover {
-  color: #9627ba;
-}
-
-.ui.purple.dividing.header {
-  border-bottom: 2px solid #A333C8;
-}
-
-.ui.pink.header {
-  color: #E03997;
-}
-
-a.ui.pink.header:hover {
-  color: #e61a8d;
-}
-
-.ui.pink.dividing.header {
-  border-bottom: 2px solid #E03997;
-}
-
-.ui.brown.header {
-  color: #A5673F;
-}
-
-a.ui.brown.header:hover {
-  color: #975b33;
-}
-
-.ui.brown.dividing.header {
-  border-bottom: 2px solid #A5673F;
-}
-
-.ui.grey.header {
-  color: #767676;
-}
-
-a.ui.grey.header:hover {
-  color: #838383;
-}
-
-.ui.grey.dividing.header {
-  border-bottom: 2px solid #767676;
-}
-
-.ui.black.header {
-  color: #1B1C1D;
-}
-
-a.ui.black.header:hover {
-  color: #27292a;
-}
-
-.ui.black.dividing.header {
-  border-bottom: 2px solid #1B1C1D;
-}
-
-/*-------------------
-         Aligned
-  --------------------*/
-
-.ui.left.aligned.header {
-  text-align: left;
-}
-
-.ui.right.aligned.header {
-  text-align: right;
-}
-
-.ui.centered.header,
-.ui.center.aligned.header {
-  text-align: center;
-}
-
-.ui.justified.header {
-  text-align: justify;
-}
-
-.ui.justified.header:after {
-  display: inline-block;
-  content: '';
-  width: 100%;
-}
-
-/*-------------------
-         Floated
-  --------------------*/
-
-.ui.floated.header,
-.ui[class*="left floated"].header {
-  float: left;
-  margin-top: 0;
-  margin-right: 0.5em;
-}
-
-.ui[class*="right floated"].header {
-  float: right;
-  margin-top: 0;
-  margin-left: 0.5em;
-}
-
-/*-------------------
-         Fitted
-  --------------------*/
-
-.ui.fitted.header {
-  padding: 0;
-}
-
-/*-------------------
-        Dividing
-  --------------------*/
-
-.ui.dividing.header {
-  padding-bottom: 0.21428571rem;
-  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
-}
-
-.ui.dividing.header .sub.header {
-  padding-bottom: 0.21428571rem;
-}
-
-.ui.dividing.header i.icon {
-  margin-bottom: 0;
-}
-
-/*-------------------
-          Block
-  --------------------*/
-
-.ui.block.header {
-  background: #F3F4F5;
-  padding: 0.78571429rem 1rem;
-  box-shadow: none;
-  border: 1px solid #D4D4D5;
-  border-radius: 0.28571429rem;
-}
-
-.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
-  font-size: 1rem;
-}
-
-.ui.mini.block.header {
-  font-size: 0.78571429rem;
-}
-
-.ui.tiny.block.header {
-  font-size: 0.85714286rem;
-}
-
-.ui.small.block.header {
-  font-size: 0.92857143rem;
-}
-
-.ui.large.block.header {
-  font-size: 1.14285714rem;
-}
-
-.ui.big.block.header {
-  font-size: 1.28571429rem;
-}
-
-.ui.huge.block.header {
-  font-size: 1.42857143rem;
-}
-
-.ui.massive.block.header {
-  font-size: 1.71428571rem;
-}
-
-/*-------------------
-         Attached
-  --------------------*/
-
-.ui.attached.header {
-  background: #FFFFFF;
-  padding: 0.78571429rem 1rem;
-  margin: 0 -1px 0 -1px;
-  box-shadow: none;
-  border: 1px solid #D4D4D5;
-  border-radius: 0;
-}
-
-.ui.attached.block.header {
-  background: #F3F4F5;
-}
-
-.ui.attached:not(.top).header {
-  border-top: none;
-}
-
-.ui.top.attached.header {
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-}
-
-.ui.bottom.attached.header {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-}
-
-/* Attached Sizes */
-
-.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
-  font-size: 1em;
-}
-
-.ui.mini.attached.header {
-  font-size: 0.78571429em;
-}
-
-.ui.tiny.attached.header {
-  font-size: 0.85714286em;
-}
-
-.ui.small.attached.header {
-  font-size: 0.92857143em;
-}
-
-.ui.large.attached.header {
-  font-size: 1.14285714em;
-}
-
-.ui.big.attached.header {
-  font-size: 1.28571429em;
-}
-
-.ui.huge.attached.header {
-  font-size: 1.42857143em;
-}
-
-.ui.massive.attached.header {
-  font-size: 1.71428571em;
-}
-
-/*-------------------
-        Sizing
---------------------*/
-
-.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
-  font-size: 1.28571429em;
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
 /*******************************
          Site Overrides
 *******************************/
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index 367bdf3642de7..876996a4b4e33 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -28,7 +28,6 @@
     "dimmer",
     "dropdown",
     "form",
-    "header",
     "input",
     "label",
     "list",
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 2a4a6d77ff594..83933ef24dd01 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -268,6 +268,10 @@ const sfc = {
       return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
     },
 
+    isExpandable(status) {
+      return ['success', 'running', 'failure', 'cancelled'].includes(status);
+    },
+
     closeDropdown() {
       if (this.menuVisible) this.menuVisible = false;
     },
@@ -459,12 +463,12 @@ export function initRepositoryActionView() {
         </div>
         <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" @click.stop="toggleStepLogs(i)" :class="currentJobStepsStates[i].expanded ? 'selected' : ''">
+            <div class="job-step-summary" @click.stop="jobStep.status !== 'skipped' && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->
               <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
-              <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/>
+              <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['gt-mr-3', !isExpandable(jobStep.status) && 'tw-invisible']"/>
               <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/>
 
               <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
@@ -715,13 +719,21 @@ export function initRepositoryActionView() {
 }
 
 .job-step-container .job-step-summary {
-  cursor: pointer;
   padding: 5px 10px;
   display: flex;
   align-items: center;
   border-radius: var(--border-radius);
 }
 
+.job-step-container .job-step-summary.step-expandable {
+  cursor: pointer;
+}
+
+.job-step-container .job-step-summary.step-expandable:hover {
+  color: var(--color-console-fg);
+  background-color: var(--color-console-hover-bg);
+}
+
 .job-step-container .job-step-summary .step-summary-msg {
   flex: 1;
 }
@@ -730,12 +742,6 @@ export function initRepositoryActionView() {
   margin-left: 16px;
 }
 
-.job-step-container .job-step-summary:hover {
-  color: var(--color-console-fg);
-  background-color: var(--color-console-hover-bg);
-
-}
-
 .job-step-container .job-step-summary.selected {
   color: var(--color-console-fg);
   background-color: var(--color-console-active-bg);