From 887e5d985ea5d6f97a912470f97aba534bfdde7d Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 20:37:08 +0100
Subject: [PATCH] Use icon sizes relative to font size (#4575)

---
 docs/static/img/feat-docker.svg               |  2 +-
 docs/static/img/feat-opensource.svg           |  2 +-
 docs/static/img/workflows.svg                 |  2 +-
 web/src/components/atomic/Icon.vue            | 78 +++++++++----------
 web/src/components/atomic/IconButton.vue      |  6 +-
 web/src/components/form/Checkbox.vue          | 10 ++-
 web/src/components/form/RadioField.vue        | 10 ++-
 web/src/components/layout/Container.vue       |  2 +-
 .../layout/header/ActivePipelines.vue         |  4 +-
 web/src/components/layout/header/Navbar.vue   | 24 +++---
 .../components/repo/pipeline/PipelineItem.vue | 20 ++---
 .../repo/pipeline/PipelineStatusIcon.vue      |  4 +-
 web/src/views/repo/RepoWrapper.vue            |  4 +-
 web/src/views/repo/pipeline/Pipeline.vue      | 18 ++---
 14 files changed, 95 insertions(+), 91 deletions(-)

diff --git a/docs/static/img/feat-docker.svg b/docs/static/img/feat-docker.svg
index 1498e22c8..31c054cf9 100644
--- a/docs/static/img/feat-docker.svg
+++ b/docs/static/img/feat-docker.svg
@@ -1,2 +1,2 @@
 <!-- https://raw.githubusercontent.com/Templarian/MaterialDesign/master/LICENSE -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M21.81 10.25c-.06-.04-.56-.43-1.64-.43c-.28 0-.56.03-.84.08c-.21-1.4-1.38-2.11-1.43-2.14l-.29-.17l-.18.27c-.24.36-.43.77-.51 1.19c-.2.8-.08 1.56.33 2.21c-.49.28-1.29.35-1.46.35H2.62c-.34 0-.62.28-.62.63c0 1.15.18 2.3.58 3.38c.45 1.19 1.13 2.07 2 2.61c.98.6 2.59.94 4.42.94c.79 0 1.61-.07 2.42-.22c1.12-.2 2.2-.59 3.19-1.16A8.3 8.3 0 0 0 16.78 16c1.05-1.17 1.67-2.5 2.12-3.65h.19c1.14 0 1.85-.46 2.24-.85c.26-.24.45-.53.59-.87l.08-.24l-.19-.14m-17.96.99h1.76c.08 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16H3.85c-.09 0-.16.07-.16.16v1.58c.01.09.07.16.16.16m2.43 0h1.76c.08 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16H6.28c-.09 0-.16.07-.16.16v1.58c.01.09.07.16.16.16m2.47 0h1.75c.1 0 .17-.07.17-.16V9.5c0-.08-.06-.16-.17-.16H8.75c-.08 0-.15.07-.15.16v1.58c0 .09.06.16.15.16m2.44 0h1.77c.08 0 .15-.07.15-.16V9.5c0-.08-.06-.16-.15-.16h-1.77c-.08 0-.15.07-.15.16v1.58c0 .09.07.16.15.16M6.28 9h1.76c.08 0 .16-.09.16-.18V7.25c0-.09-.07-.16-.16-.16H6.28c-.09 0-.16.06-.16.16v1.57c.01.09.07.18.16.18m2.47 0h1.75c.1 0 .17-.09.17-.18V7.25c0-.09-.06-.16-.17-.16H8.75c-.08 0-.15.06-.15.16v1.57c0 .09.06.18.15.18m2.44 0h1.77c.08 0 .15-.09.15-.18V7.25c0-.09-.07-.16-.15-.16h-1.77c-.08 0-.15.06-.15.16v1.57c0 .09.07.18.15.18m0-2.28h1.77c.08 0 .15-.07.15-.16V5c0-.1-.07-.17-.15-.17h-1.77c-.08 0-.15.06-.15.17v1.56c0 .08.07.16.15.16m2.46 4.52h1.76c.09 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16h-1.76c-.08 0-.15.07-.15.16v1.58c0 .09.07.16.15.16" fill="currentColor"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="1.5rem" height="1.5rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M21.81 10.25c-.06-.04-.56-.43-1.64-.43c-.28 0-.56.03-.84.08c-.21-1.4-1.38-2.11-1.43-2.14l-.29-.17l-.18.27c-.24.36-.43.77-.51 1.19c-.2.8-.08 1.56.33 2.21c-.49.28-1.29.35-1.46.35H2.62c-.34 0-.62.28-.62.63c0 1.15.18 2.3.58 3.38c.45 1.19 1.13 2.07 2 2.61c.98.6 2.59.94 4.42.94c.79 0 1.61-.07 2.42-.22c1.12-.2 2.2-.59 3.19-1.16A8.3 8.3 0 0 0 16.78 16c1.05-1.17 1.67-2.5 2.12-3.65h.19c1.14 0 1.85-.46 2.24-.85c.26-.24.45-.53.59-.87l.08-.24l-.19-.14m-17.96.99h1.76c.08 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16H3.85c-.09 0-.16.07-.16.16v1.58c.01.09.07.16.16.16m2.43 0h1.76c.08 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16H6.28c-.09 0-.16.07-.16.16v1.58c.01.09.07.16.16.16m2.47 0h1.75c.1 0 .17-.07.17-.16V9.5c0-.08-.06-.16-.17-.16H8.75c-.08 0-.15.07-.15.16v1.58c0 .09.06.16.15.16m2.44 0h1.77c.08 0 .15-.07.15-.16V9.5c0-.08-.06-.16-.15-.16h-1.77c-.08 0-.15.07-.15.16v1.58c0 .09.07.16.15.16M6.28 9h1.76c.08 0 .16-.09.16-.18V7.25c0-.09-.07-.16-.16-.16H6.28c-.09 0-.16.06-.16.16v1.57c.01.09.07.18.16.18m2.47 0h1.75c.1 0 .17-.09.17-.18V7.25c0-.09-.06-.16-.17-.16H8.75c-.08 0-.15.06-.15.16v1.57c0 .09.06.18.15.18m2.44 0h1.77c.08 0 .15-.09.15-.18V7.25c0-.09-.07-.16-.15-.16h-1.77c-.08 0-.15.06-.15.16v1.57c0 .09.07.18.15.18m0-2.28h1.77c.08 0 .15-.07.15-.16V5c0-.1-.07-.17-.15-.17h-1.77c-.08 0-.15.06-.15.17v1.56c0 .08.07.16.15.16m2.46 4.52h1.76c.09 0 .16-.07.16-.16V9.5c0-.08-.07-.16-.16-.16h-1.76c-.08 0-.15.07-.15.16v1.58c0 .09.07.16.15.16" fill="currentColor"></path></svg>
diff --git a/docs/static/img/feat-opensource.svg b/docs/static/img/feat-opensource.svg
index 89366e23d..61f3b413b 100644
--- a/docs/static/img/feat-opensource.svg
+++ b/docs/static/img/feat-opensource.svg
@@ -1,2 +1,2 @@
 <!-- http://elusiveicons.com/license/ -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--el" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1200 1200"><path d="M600.073 17.426C268.728 17.426 0 286.008 0 617.353c0 260.49 166.117 482.172 398.146 565.076L546.04 791.313c-74.269-23.013-128.273-92.136-128.273-173.96c0-100.646 81.661-182.307 182.308-182.307c100.646 0 182.16 81.66 182.16 182.307c0 81.888-53.952 151.147-128.273 174.106l147.896 391.115C1033.938 1099.72 1200 877.909 1200 617.353c0-331.345-268.581-599.927-599.927-599.927z" fill="currentColor"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--el" width="1.5rem" height="1.5rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1200 1200"><path d="M600.073 17.426C268.728 17.426 0 286.008 0 617.353c0 260.49 166.117 482.172 398.146 565.076L546.04 791.313c-74.269-23.013-128.273-92.136-128.273-173.96c0-100.646 81.661-182.307 182.308-182.307c100.646 0 182.16 81.66 182.16 182.307c0 81.888-53.952 151.147-128.273 174.106l147.896 391.115C1033.938 1099.72 1200 877.909 1200 617.353c0-331.345-268.581-599.927-599.927-599.927z" fill="currentColor"></path></svg>
diff --git a/docs/static/img/workflows.svg b/docs/static/img/workflows.svg
index 966b99cc5..597fbb476 100644
--- a/docs/static/img/workflows.svg
+++ b/docs/static/img/workflows.svg
@@ -1,2 +1,2 @@
 <!--Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)-->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--fa-solid" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33l-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23l-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87L12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z" fill="currentColor"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--fa-solid" width="1.5rem" height="1.5rem" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33l-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23l-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87L12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z" fill="currentColor"></path></svg>
diff --git a/web/src/components/atomic/Icon.vue b/web/src/components/atomic/Icon.vue
index 2c43236aa..facac554f 100644
--- a/web/src/components/atomic/Icon.vue
+++ b/web/src/components/atomic/Icon.vue
@@ -1,59 +1,59 @@
 <!-- cSpell:ignore radiobox timelapse -->
 <template>
-  <SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="20" />
-  <SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="20" />
-  <SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="20" />
-  <SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="20" />
-  <SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="20" />
-  <SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="20" />
-  <SvgIcon v-else-if="name === 'tag'" :path="mdiTagOutline" size="20" />
-  <SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="20" />
-  <SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="20" />
-  <SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="20" />
+  <SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'tag'" :path="mdiTagOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="1.3rem" />
   <SvgIcon v-else-if="name === 'github'" :path="mdiGithub" size="32" />
   <SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="32" />
   <SvgIcon v-else-if="name === 'settings'" :path="mdiCog" size="32" />
-  <SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="20" />
-  <SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="20" />
-  <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="20" />
+  <SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="1.3rem" />
   <SvgIcon
     v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
     type="mdi"
     :path="mdiCloseCircleOutline"
-    size="20"
+    size="1.3rem"
   />
-  <SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="20" />
+  <SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="1.3rem" />
   <SvgIcon
     v-else-if="name === 'status-running' || name === 'status-started'"
     type="mdi"
     :path="mdiRadioboxIndeterminateVariant"
-    size="20"
+    size="1.3rem"
   />
-  <SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="20" />
-  <SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="20" />
-  <SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="20" />
-  <SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="20" />
-  <SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="20" />
+  <SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="1.3rem" />
   <SvgIcon v-else-if="name === 'gitlab'" :path="mdiGitlab" size="32" />
   <SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="32" />
-  <SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="20" />
-  <SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="20" />
-  <SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="20" />
-  <SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="20" />
-  <SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="20" />
-  <SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="20" />
-  <SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="20" />
-  <SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="20" />
-  <SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="20" />
-  <SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="20" />
-  <SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="20" />
-  <SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="20" />
-  <SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="20" />
-  <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="20" />
-  <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="20" />
+  <SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="1.3rem" />
 
-  <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="24" />
-  <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="24" />
+  <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="1.3rem" />
 
   <SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
   <SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
@@ -78,7 +78,7 @@
     </path>
   </svg>
 
-  <div v-else-if="name === 'blank'" class="h-6 w-6" />
+  <div v-else-if="name === 'blank'" class="w-6 h-6" />
 </template>
 
 <script lang="ts" setup>
diff --git a/web/src/components/atomic/IconButton.vue b/web/src/components/atomic/IconButton.vue
index 09094d9ae..f113b00a7 100644
--- a/web/src/components/atomic/IconButton.vue
+++ b/web/src/components/atomic/IconButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <router-link v-if="to" :to="to" :title="title" :aria-label="title" class="icon-button">
+  <router-link v-if="to" :to="to" :title="title" :aria-label="title" class="w-8 h-8 icon-button">
     <slot>
       <Icon v-if="icon" :name="icon" />
     </slot>
@@ -21,7 +21,7 @@
     <slot>
       <Icon v-if="icon" :name="icon" />
     </slot>
-    <div v-if="isLoading" class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center">
+    <div v-if="isLoading" class="top-0 right-0 bottom-0 left-0 absolute flex justify-center items-center">
       <Icon name="loading" class="animate-spin" />
     </div>
   </button>
@@ -44,6 +44,6 @@ defineProps<{
 
 <style scoped>
 .icon-button {
-  @apply relative flex items-center justify-center px-1 py-1 rounded-md bg-transparent hover-effect overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply relative flex justify-center items-center bg-transparent disabled:opacity-50 px-1 py-1 rounded-md disabled:cursor-not-allowed overflow-hidden hover-effect;
 }
 </style>
diff --git a/web/src/components/form/Checkbox.vue b/web/src/components/form/Checkbox.vue
index 15a0a7def..56b8366ef 100644
--- a/web/src/components/form/Checkbox.vue
+++ b/web/src/components/form/Checkbox.vue
@@ -3,12 +3,12 @@
     <input
       :id="`checkbox-${id}`"
       type="checkbox"
-      class="checkbox flex-shrink-0 relative border bg-wp-control-neutral-100 border-wp-control-neutral-200 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-wp-control-ok-200 checked:border-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300"
+      class="relative flex-shrink-0 border-wp-control-neutral-200 checked:border-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 bg-wp-control-neutral-100 checked:bg-wp-control-ok-200 border rounded-md w-5 h-5 transition-colors duration-150 cursor-pointer checkbox"
       :checked="innerValue"
       @click="innerValue = !innerValue"
     />
     <div class="flex flex-col ml-4">
-      <label class="cursor-pointer text-wp-text-100" :for="`checkbox-${id}`">{{ label }}</label>
+      <label class="text-wp-text-100 cursor-pointer" :for="`checkbox-${id}`">{{ label }}</label>
       <span v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</span>
     </div>
   </div>
@@ -40,6 +40,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
 
 <style scoped>
 .checkbox {
+  width: 1.3rem;
+  height: 1.3rem;
   appearance: none;
   outline: 0;
   cursor: pointer;
@@ -52,8 +54,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
   display: block;
   top: 50%;
   left: 50%;
-  width: 8px;
-  height: 14px;
+  width: 0.5rem;
+  height: 1rem;
   border-style: solid;
   border-color: white;
   border-width: 0 2px 2px 0;
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index 689765246..46666eb09 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -3,13 +3,13 @@
     <input
       :id="`radio-${id}-${option.value}`"
       type="radio"
-      class="radio relative flex-shrink-0 border bg-wp-control-neutral-100 border-wp-control-neutral-200 cursor-pointer rounded-full w-5 h-5 checked:bg-wp-control-ok-200 checked:border-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300"
+      class="relative flex-shrink-0 border-wp-control-neutral-200 checked:border-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 bg-wp-control-neutral-100 checked:bg-wp-control-ok-200 border rounded-full w-5 h-5 cursor-pointer radio"
       :value="option.value"
       :checked="innerValue?.includes(option.value)"
       @click="innerValue = option.value"
     />
     <div class="flex flex-col ml-4">
-      <label class="cursor-pointer text-wp-text-100" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
+      <label class="text-wp-text-100 cursor-pointer" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
       <span v-if="option.description" class="text-sm text-wp-text-alt-100">{{ option.description }}</span>
     </div>
   </div>
@@ -42,6 +42,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
 
 <style scoped>
 .radio {
+  width: 1.3rem;
+  height: 1.3rem;
   appearance: none;
   outline: 0;
   cursor: pointer;
@@ -54,8 +56,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
   display: block;
   top: 50%;
   left: 50%;
-  width: 8px;
-  height: 8px;
+  width: 0.5rem;
+  height: 0.5rem;
   border-radius: 50%;
   background: white;
   transform: translate(-50%, -50%);
diff --git a/web/src/components/layout/Container.vue b/web/src/components/layout/Container.vue
index d2fb4e7cf..8e05768ad 100644
--- a/web/src/components/layout/Container.vue
+++ b/web/src/components/layout/Container.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full p-4 mx-auto" :class="{ 'max-w-5xl': !fullWidth && !fillWidth, 'md:px-0': fullWidth }">
+  <div class="mx-auto p-4 w-full" :class="{ 'max-w-5xl': !fullWidth && !fillWidth, 'md:px-0': fullWidth }">
     <slot />
   </div>
 </template>
diff --git a/web/src/components/layout/header/ActivePipelines.vue b/web/src/components/layout/header/ActivePipelines.vue
index 3f4da9ac8..99e35bd78 100644
--- a/web/src/components/layout/header/ActivePipelines.vue
+++ b/web/src/components/layout/header/ActivePipelines.vue
@@ -1,12 +1,12 @@
 <template>
   <IconButton
     :title="pipelineCount > 0 ? `${$t('pipeline_feed')} (${pipelineCount})` : $t('pipeline_feed')"
-    class="!p-1.5 relative text-current active-pipelines-toggle"
+    class="relative !p-1.5 text-current active-pipelines-toggle"
     @click="toggle"
   >
     <div v-if="pipelineCount > 0" class="spinner" />
     <div
-      class="z-0 flex items-center justify-center h-full w-full font-bold bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-10 rounded-md"
+      class="z-0 flex justify-center items-center bg-white dark:bg-black bg-opacity-15 dark:bg-opacity-10 rounded-md w-full h-full font-bold"
     >
       <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
       {{ pipelineCount > 9 ? '9+' : pipelineCount }}
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 56aebb291..8352d4ddd 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,39 +1,39 @@
 <template>
   <nav
-    class="flex bg-wp-primary-200 dark:bg-wp-primary-300 text-neutral-content p-4 border-b border-wp-background-100 font-bold text-wp-primary-text-100"
+    class="flex border-wp-background-100 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
   >
     <div class="flex items-center space-x-2">
       <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
         <WoodpeckerLogo class="w-8 h-8" />
         <span class="text-xs" :title="version?.current">{{ version?.currentShort }}</span>
       </router-link>
-      <router-link v-if="user" :to="{ name: 'repos' }" class="navbar-link navbar-clickable">
+      <router-link v-if="user" :to="{ name: 'repos' }" class="navbar-clickable navbar-link">
         <span class="flex md:hidden">{{ $t('repos') }}</span>
-        <span class="hidden md:flex">{{ $t('repositories') }}</span>
+        <span class="md:flex hidden">{{ $t('repositories') }}</span>
       </router-link>
-      <a href="https://woodpecker-ci.org/" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{
+      <a href="https://woodpecker-ci.org/" target="_blank" class="md:flex hidden navbar-clickable navbar-link">{{
         $t('docs')
       }}</a>
-      <a v-if="enableSwagger" :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{
+      <a v-if="enableSwagger" :href="apiUrl" target="_blank" class="md:flex hidden navbar-clickable navbar-link">{{
         $t('api')
       }}</a>
     </div>
-    <div class="flex ml-auto -m-1.5 items-center space-x-2">
+    <div class="flex items-center space-x-2 -m-1.5 ml-auto">
       <IconButton
         v-if="user?.admin"
-        class="navbar-icon relative"
+        class="relative navbar-icon"
         :title="$t('settings')"
         :to="{ name: 'admin-settings' }"
       >
         <Icon name="settings" />
         <div
           v-if="version?.needsUpdate"
-          class="absolute top-2 right-2 bg-int-wp-state-error-100 rounded-full w-3 h-3"
+          class="top-2 right-2 absolute bg-int-wp-state-error-100 rounded-full w-3 h-3"
         />
       </IconButton>
 
-      <ActivePipelines v-if="user" class="navbar-icon" />
-      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
+      <ActivePipelines v-if="user" class="!p-1.5 navbar-icon" />
+      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="!p-1.5 navbar-icon">
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <Button v-else :text="$t('login')" :to="`/login?url=${route.fullPath}`" />
@@ -66,7 +66,7 @@ const { enableSwagger } = config;
 
 <style scoped>
 .navbar-icon {
-  @apply w-11 h-11 rounded-md p-2.5;
+  @apply p-2.5 rounded-md w-11 h-11;
 }
 
 .navbar-icon :deep(svg) {
@@ -74,6 +74,6 @@ const { enableSwagger } = config;
 }
 
 .navbar-link {
-  @apply px-3 py-2 -my-1 rounded-md hover-effect;
+  @apply -my-1 px-3 py-2 rounded-md hover-effect;
 }
 </style>
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index 99c0054a0..b70ce016e 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -1,8 +1,8 @@
 <template>
   <ListItem v-if="pipeline" class="p-0 w-full">
-    <div class="flex w-11 items-center md:mr-4">
+    <div class="flex items-center w-11">
       <div
-        class="h-full w-3"
+        class="w-3 h-full"
         :class="{
           'bg-wp-state-warn-100': pipeline.status === 'pending',
           'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
@@ -11,7 +11,7 @@
           'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
         }"
       />
-      <div class="w-8 flex flex-wrap justify-between items-center h-full">
+      <div class="flex flex-wrap justify-between items-center w-8 h-full">
         <PipelineRunningIcon v-if="pipeline.status === 'started' || pipeline.status === 'running'" />
         <PipelineStatusIcon v-else class="mx-2 md:mx-3" :status="pipeline.status" />
       </div>
@@ -20,10 +20,10 @@
     <div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
       <div class="<md:hidden flex items-center flex-shrink-0">
         <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
-        <img v-else class="rounded-md w-8" :src="pipeline.author_avatar" />
+        <img v-else class="rounded-md w-6" :src="pipeline.author_avatar" />
       </div>
 
-      <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
+      <div class="flex items-center md:mx-4 w-full md:w-auto min-w-0">
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
         <span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
@@ -37,9 +37,9 @@
       </div>
 
       <div
-        class="grid grid-rows-2 grid-cols-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100"
+        class="flex-shrink-0 gap-x-4 gap-y-2 grid grid-cols-2 grid-rows-2 grid-flow-col md:ml-auto py-2 w-full md:w-96 text-wp-text-100"
       >
-        <div class="flex space-x-2 items-center min-w-0">
+        <div class="flex items-center space-x-2 min-w-0">
           <span :title="pipelineEventTitle">
             <Icon v-if="pipeline.event === 'pull_request'" name="pull-request" />
             <Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
@@ -52,17 +52,17 @@
           <span class="truncate">{{ prettyRef }}</span>
         </div>
 
-        <div class="flex space-x-2 items-center min-w-0">
+        <div class="flex items-center space-x-2 min-w-0">
           <Icon name="commit" />
           <span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
         </div>
 
-        <div class="flex space-x-2 items-center min-w-0" :title="$t('repo.pipeline.duration')">
+        <div class="flex items-center space-x-2 min-w-0" :title="$t('repo.pipeline.duration')">
           <Icon name="duration" />
           <span class="truncate">{{ duration }}</span>
         </div>
 
-        <div class="flex space-x-2 items-center min-w-0" :title="$t('repo.pipeline.created', { created })">
+        <div class="flex items-center space-x-2 min-w-0" :title="$t('repo.pipeline.created', { created })">
           <Icon name="since" />
           <span class="truncate">{{ since }}</span>
         </div>
diff --git a/web/src/components/repo/pipeline/PipelineStatusIcon.vue b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
index eec6d1b73..bd1da4da2 100644
--- a/web/src/components/repo/pipeline/PipelineStatusIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex items-center justify-center"
+    class="flex justify-center items-center"
     :title="$t('repo.pipeline.status.status', { status: statusDescriptions[status] })"
   >
     <Icon
       :name="service ? 'settings' : `status-${status}`"
-      size="24"
+      size="1.5rem"
       :class="{
         'text-wp-state-error-100': pipelineStatusColors[status] === 'red',
         'text-wp-state-neutral-100': pipelineStatusColors[status] === 'gray',
diff --git a/web/src/views/repo/RepoWrapper.vue b/web/src/views/repo/RepoWrapper.vue
index b387bc20f..853ffa127 100644
--- a/web/src/views/repo/RepoWrapper.vue
+++ b/web/src/views/repo/RepoWrapper.vue
@@ -12,9 +12,9 @@
     </template>
     <template #headerActions>
       <a v-if="badgeUrl" :href="badgeUrl" target="_blank">
-        <img :src="badgeUrl" />
+        <img class="w-28" :src="badgeUrl" />
       </a>
-      <IconButton :href="repo.forge_url" :title="$t('repo.open_in_forge')" :icon="forgeIcon" class="forge" />
+      <IconButton :href="repo.forge_url" :title="$t('repo.open_in_forge')" :icon="forgeIcon" class="w-8 h-8 forge" />
       <IconButton
         v-if="repoPermissions.admin"
         :to="{ name: 'repo-settings' }"
diff --git a/web/src/views/repo/pipeline/Pipeline.vue b/web/src/views/repo/pipeline/Pipeline.vue
index 1d640e15d..15a5ff735 100644
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@@ -1,17 +1,17 @@
 <template>
-  <Container full-width class="flex flex-col flex-grow-0 md:flex-grow md:min-h-xs md:px-4">
-    <div class="flex w-full min-h-0 flex-grow gap-4 flex-wrap-reverse md:flex-nowrap">
+  <Container full-width class="flex flex-col md:flex-grow flex-grow-0 md:px-4 md:min-h-xs">
+    <div class="flex flex-wrap-reverse md:flex-nowrap flex-grow gap-4 w-full min-h-0">
       <PipelineStepList
         v-model:selected-step-id="selectedStepId"
         :class="{ 'hidden md:flex': pipeline!.status === 'blocked' }"
         :pipeline="pipeline!"
       />
 
-      <div class="flex items-start justify-center flex-grow relative basis-full md:basis-auto">
+      <div class="relative flex flex-grow justify-center items-start basis-full md:basis-auto">
         <Container v-if="pipeline!.errors?.some((e) => !e.is_warning)" fill-width class="p-0">
           <Panel>
-            <div class="flex flex-col items-center text-center gap-4">
-              <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" size="24" />
+            <div class="flex flex-col items-center gap-4 text-center">
+              <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" size="1.5rem" />
               <span class="text-xl">{{ $t('repo.pipeline.we_got_some_errors') }}</span>
               <Button color="red" :text="$t('repo.pipeline.show_errors')" :to="{ name: 'repo-pipeline-errors' }" />
             </div>
@@ -21,9 +21,9 @@
         <Container v-else-if="pipeline!.status === 'blocked'" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
-              <Icon name="status-blocked" size="24" class="w-16 h-16" />
+              <Icon name="status-blocked" size="1.5rem" class="w-16 h-16" />
               <span class="text-xl">{{ $t('repo.pipeline.protected.awaits') }}</span>
-              <div v-if="repoPermissions!.push" class="flex gap-2 flex-wrap items-center justify-center">
+              <div v-if="repoPermissions!.push" class="flex flex-wrap justify-center items-center gap-2">
                 <Button
                   color="green"
                   :text="$t('repo.pipeline.protected.approve')"
@@ -44,7 +44,7 @@
         <Container v-else-if="pipeline!.status === 'declined'" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
-              <Icon name="status-declined" size="24" class="w-16 h-16 text-wp-state-error-100" />
+              <Icon name="status-declined" size="1.5rem" class="w-16 h-16 text-wp-state-error-100" />
               <p class="text-xl">{{ $t('repo.pipeline.protected.declined') }}</p>
             </div>
           </Panel>
@@ -54,7 +54,7 @@
           v-else-if="selectedStepId !== null"
           v-model:step-id="selectedStepId"
           :pipeline="pipeline!"
-          class="fixed top-0 left-0 w-full h-full md:absolute"
+          class="top-0 left-0 fixed md:absolute w-full h-full"
         />
       </div>
     </div>