13 files changed, 148 insertions, 112 deletions
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 481e997d4f..deaaf83680 100644
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -52,8 +52,7 @@ form.single-button-form.is-loading .button {
 }
 
 .markup pre.is-loading,
-.editor-loading.is-loading,
-.pdf-content.is-loading {
+.editor-loading.is-loading {
   height: var(--height-loading);
 }
 
@@ -116,3 +115,15 @@ code.language-math.is-loading::after {
   animation-duration: 100ms;
   animation-timing-function: ease-in-out;
 }
+
+/* FIXME: `octicon-sync` is counterclockwise, so this animation is also counterclockwise, it looks somewhat strange.
+Ideally in the future we should use a better image for clockwise animation. */
+.circular-spin {
+  animation: circular-spin-keyframes 1s linear infinite;
+}
+
+@keyframes circular-spin-keyframes {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/web_src/css/modules/breadcrumb.css b/web_src/css/modules/breadcrumb.css
index ca488c2150..77e31ef627 100644
--- a/web_src/css/modules/breadcrumb.css
+++ b/web_src/css/modules/breadcrumb.css
@@ -1,14 +1,10 @@
 .breadcrumb {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   gap: 3px;
+  overflow-wrap: anywhere;
 }
 
 .breadcrumb .breadcrumb-divider {
   color: var(--color-text-light-2);
 }
-
-.breadcrumb > * {
-  display: inline;
-}
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index c4addd05f0..8e3309474b 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -1,20 +1,15 @@
-/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
-   unused rules here after refactoring, please remove them. */
-
 .ui.button {
   cursor: pointer;
-  display: inline-block;
-  min-height: 1em;
+  display: inline-flex;
   outline: none;
-  vertical-align: baseline;
   font-family: var(--fonts-regular);
   margin: 0 0.25em 0 0;
-  padding: 0.78571429em 1.5em;
   font-weight: var(--font-weight-normal);
+  font-size: 1rem;
   text-align: center;
   text-decoration: none;
   line-height: 1;
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   justify-content: center;
@@ -58,12 +53,13 @@
   pointer-events: none !important;
 }
 
+/* there is no "ui labeled icon button" support" because it is not used */
 .ui.labeled.button:not(.icon) {
-  display: inline-flex;
   flex-direction: row;
   background: none;
-  padding: 0 !important;
+  padding: 0;
   border: none;
+  min-height: unset;
 }
 .ui.labeled.button > .button {
   margin: 0;
@@ -102,47 +98,60 @@
   margin: 0 -0.21428571em 0 0.42857143em;
 }
 
+/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
+.ui.button { /* stylelint-disable-line no-duplicate-selectors */
+  min-height: 38px;
+  padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
+}
 .ui.compact.buttons .button,
 .ui.compact.button {
-  padding: 0.58928571em 1.125em;
+  padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
+  min-height: 32px;
 }
 .ui.compact.icon.buttons .button,
 .ui.compact.icon.button {
-  padding: 0.58928571em;
-}
-.ui.compact.labeled.icon.button {
-  padding: 0.58928571em 3.69642857em;
-}
-.ui.compact.labeled.icon.button > .icon {
-  padding: 0.58928571em 0;
+  padding: 0.57em /* around 8px */;
 }
 
-.ui.buttons .button,
-.ui.button {
-  font-size: 1rem;
-}
+/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
 .ui.mini.buttons .dropdown,
 .ui.mini.buttons .dropdown .menu > .item,
 .ui.mini.buttons .button,
 .ui.ui.ui.ui.mini.button {
-  font-size: 0.78571429rem;
+  font-size: 11px;
+  min-height: 30px;
+}
+.ui.ui.ui.ui.mini.button.compact {
+  min-height: 26px;
 }
+
+/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
 .ui.tiny.buttons .dropdown,
 .ui.tiny.buttons .dropdown .menu > .item,
 .ui.tiny.buttons .button,
 .ui.ui.ui.ui.tiny.button {
-  font-size: 0.85714286rem;
+  font-size: 12px;
+  min-height: 32px;
+}
+.ui.ui.ui.ui.tiny.button.compact {
+  min-height: 28px;
 }
+
+/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
 .ui.small.buttons .dropdown,
 .ui.small.buttons .dropdown .menu > .item,
 .ui.small.buttons .button,
 .ui.ui.ui.ui.small.button {
-  font-size: 0.92857143rem;
+  font-size: 13px;
+  min-height: 34px;
+}
+.ui.ui.ui.ui.small.button.compact {
+  min-height: 30px;
 }
 
 .ui.icon.buttons .button,
 .ui.icon.button:not(.compact) {
-  padding: 0.78571429em;
+  padding: 0.57em;
 }
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
@@ -152,12 +161,12 @@
 
 .ui.basic.buttons .button,
 .ui.basic.button {
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
   background: none;
 }
 .ui.basic.buttons {
   border: 1px solid var(--color-secondary);
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
 }
 .ui.basic.buttons .button {
   border-radius: 0;
@@ -188,29 +197,6 @@
   background: var(--color-active);
 }
 
-.ui.labeled.icon.button {
-  position: relative;
-  padding-left: 4.07142857em !important;
-  padding-right: 1.5em !important;
-}
-
-.ui.labeled.icon.button > .icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  line-height: 1;
-  border-radius: 0;
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  text-align: center;
-  animation: none;
-  padding: 0.78571429em 0;
-  margin: 0;
-  width: 2.57142857em;
-  background: var(--color-hover);
-}
-
 .ui.button.toggle.active {
   background-color: var(--color-green);
   color: var(--color-white);
@@ -366,25 +352,33 @@ a.btn:hover {
   color: inherit;
 }
 
+.btn.tiny {
+  font-size: 12px;
+}
+
+.btn.small {
+  font-size: 13px;
+}
+
 /* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
 And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
 It needs some tricks to tweak the left/right borders with active state */
 
 .ui.buttons .button {
   border-right: none;
-  flex: 1 0 auto;
   border-radius: 0;
+  flex-shrink: 0;
   margin: 0;
 }
 .ui.buttons .button:first-child {
   border-left: none;
   margin-left: 0;
-  border-top-left-radius: 0.28571429rem;
-  border-bottom-left-radius: 0.28571429rem;
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
 }
 .ui.buttons .button:last-child {
-  border-top-right-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.28571429rem;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 
 .ui.buttons .button:hover {
@@ -414,10 +408,3 @@ It needs some tricks to tweak the left/right borders with active state */
 .ui.buttons .button.active + .button {
   border-left: none;
 }
-
-/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
-   would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
-.ui.small.button:not(.compact):has(.svg) {
-  padding-top: 0.58928571em;
-  padding-bottom: 0.58928571em;
-}
diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css
index d5d5e757d6..c5ca6a1cc1 100644
--- a/web_src/css/modules/card.css
+++ b/web_src/css/modules/card.css
@@ -20,7 +20,7 @@
   background: var(--color-card);
   border: 1px solid var(--color-secondary);
   box-shadow: none;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   border-radius: var(--border-radius);
 }
 
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 9947b15b9a..f0c721eed2 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -56,10 +56,6 @@
   min-width: 0;
 }
 
-.ui.comments .comment > .avatar ~ .content {
-  margin-left: 12px;
-}
-
 .ui.comments .comment .author {
   font-size: 1em;
   font-weight: var(--font-weight-medium);
@@ -87,6 +83,6 @@
 .ui.comments .comment .text {
   margin: 0.25em 0 0.5em;
   font-size: 1em;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   line-height: 1.3;
 }
diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css
index 8924821370..7d1ca6171a 100644
--- a/web_src/css/modules/dimmer.css
+++ b/web_src/css/modules/dimmer.css
@@ -20,7 +20,7 @@
   opacity: 1;
 }
 
-.ui.dimmer > * {
+.ui.dimmer > .ui.modal {
   position: static;
   margin-top: auto !important;
   margin-bottom: auto !important;
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 1e42668aa1..cf850e4c5a 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -4,25 +4,20 @@
 .ui.label {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
-  min-width: 0;
   vertical-align: middle;
-  line-height: 1;
+  gap: var(--gap-inline);
+  min-width: 0;
+  max-width: 100%;
   background: var(--color-label-bg);
   color: var(--color-label-text);
-  padding: 0.3em 0.5em;
-  font-size: 0.85714286rem;
+  padding: 2px 6px;
+  font-size: var(--font-size-label);
   font-weight: var(--font-weight-medium);
   border: 0 solid transparent;
-  border-radius: 0.28571429rem;
+  border-radius: var(--border-radius);
   white-space: nowrap;
-}
-
-.ui.label:first-child {
-  margin-left: 0;
-}
-.ui.label:last-child {
-  margin-right: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 a.ui.label {
@@ -94,15 +89,10 @@ a.ui.label:hover {
   color: var(--color-label-text);
 }
 
-.ui.label.visible:not(.dropdown) {
-  display: inline-block !important;
-}
-
 .ui.basic.label {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text-light);
-  padding: calc(0.5833em - 1px) calc(0.833em - 1px);
 }
 a.ui.basic.label:hover {
   text-decoration: none;
@@ -263,6 +253,7 @@ a.ui.ui.ui.basic.grey.label:hover {
   color: var(--color-label-hover-bg);
 }
 
+/* "horizontal label" is actually "fat label" which has enough padding spaces to be used standalone in headers */
 .ui.horizontal.label {
   margin: 0 0.5em 0 0;
   padding: 0.4em 0.833em;
@@ -292,3 +283,58 @@ a.ui.ui.ui.basic.grey.label:hover {
 .ui.large.label {
   font-size: 1rem;
 }
+
+/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout.
+If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
+.labels-list {
+  display: contents;
+  font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
+}
+
+.labels-list a {
+  max-width: 100%; /* for ellipsis */
+}
+
+.labels-list .ui.label {
+  min-height: 20px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.with-labels-list-inline .labels-list .ui.label + .ui.label {
+  margin-left: var(--gap-inline);
+}
+
+.with-labels-list-inline .labels-list .ui.label {
+  line-height: var(--line-height-default);
+}
+
+/* Scoped labels with different colors on left and right */
+.ui.label.scope-parent {
+  background: none !important;
+  padding: 0 !important;
+  gap: 0 !important;
+}
+
+.ui.label.scope-parent > .ui.label {
+  margin: 0 !important; /* scoped label's margin is handled by the parent */
+}
+
+.ui.label.scope-left {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ui.label.scope-middle {
+  border-radius: 0;
+}
+
+.ui.label.scope-right {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.ui.label.archived-label {
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
diff --git a/web_src/css/modules/list.css b/web_src/css/modules/list.css
index 73760390de..46422cb97d 100644
--- a/web_src/css/modules/list.css
+++ b/web_src/css/modules/list.css
@@ -5,7 +5,6 @@
   list-style-type: none;
   margin: 1em 0;
   padding: 0;
-  font-size: 1em;
 }
 
 .ui.list:first-child {
diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css
index a5efd23053..5072dcbd0e 100644
--- a/web_src/css/modules/menu.css
+++ b/web_src/css/modules/menu.css
@@ -1,5 +1,6 @@
 .ui.menu {
   display: flex;
+  flex-shrink: 0;
   margin: 1rem 0;
   font-family: var(--fonts-regular);
   font-weight: var(--font-weight-normal);
@@ -643,6 +644,7 @@
   display: inline-flex;
   margin: 0;
   vertical-align: middle;
+  flex-shrink: 0;
 }
 .ui.compact.vertical.menu {
   display: inline-block;
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b09b271ad4..149766a586 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -101,19 +101,6 @@
   }
 }
 
-#navbar .ui.dropdown .navbar-profile-admin {
-  display: block;
-  position: absolute;
-  font-size: 9px;
-  font-weight: var(--font-weight-bold);
-  color: var(--color-nav-bg);
-  background: var(--color-primary);
-  padding: 2px 3px;
-  border-radius: 10px;
-  top: -1px;
-  left: 18px;
-}
-
 #navbar a.item:hover .notification_count,
 #navbar a.item:hover .header-stopwatch-dot {
   border-color: var(--color-nav-hover-bg);
@@ -129,8 +116,8 @@
   background: var(--color-primary);
   border: 2px solid var(--color-nav-bg);
   position: absolute;
-  left: 6px;
-  top: -9px;
+  left: calc(100% - 9px);
+  bottom: calc(100% - 9px);
   min-width: 17px;
   height: 17px;
   border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
diff --git a/web_src/css/modules/table.css b/web_src/css/modules/table.css
index eabca31a17..6298471d47 100644
--- a/web_src/css/modules/table.css
+++ b/web_src/css/modules/table.css
@@ -167,6 +167,11 @@
   text-overflow: ellipsis;
 }
 
+.ui.selectable.table > tbody > tr:hover,
+.ui.table tbody tr td.selectable:hover {
+  background: var(--color-hover);
+}
+
 .ui.attached.table {
   top: 0;
   bottom: 0;
@@ -289,6 +294,9 @@
 .ui.basic.striped.table > tbody > tr:nth-child(2n) {
   background: var(--color-light);
 }
+.ui.basic.striped.selectable.table > tbody > tr:nth-child(2n):hover {
+  background: var(--color-hover);
+}
 
 .ui[class*="very basic"].table {
   border: none;
diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 4438a31c9d..3c0d63f2fb 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -92,6 +92,10 @@
 }
 
 .tippy-box[data-theme="menu"] .item:focus {
+  background: var(--color-hover);
+}
+
+.tippy-box[data-theme="menu"] .item.active {
   background: var(--color-active);
 }
 
diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css
index 1145f3b1b5..330d3b176e 100644
--- a/web_src/css/modules/toast.css
+++ b/web_src/css/modules/toast.css
@@ -3,7 +3,7 @@
   position: fixed;
   opacity: 0;
   transition: all .2s ease;
-  z-index: 500;
+  z-index: var(--z-index-toast);
   border-radius: var(--border-radius);
   box-shadow: 0 8px 24px var(--color-shadow);
   display: flex;