10 files changed, 135 insertions, 87 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..b105bb5de2 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,6 +352,14 @@ 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 */
@@ -379,12 +373,12 @@ It needs some tricks to tweak the left/right borders with active state */
 .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/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..bb6f1b512f 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -4,25 +4,19 @@
 .ui.label {
   display: inline-flex;
   align-items: center;
-  gap: .25rem;
+  gap: var(--gap-inline);
   min-width: 0;
-  vertical-align: middle;
-  line-height: 1;
+  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 {
@@ -292,3 +286,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..ab431e3675 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -129,8 +129,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/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;