From 07691b1f3904ebfdf7f6c831a8ebcb1e0097d07b Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Tue, 7 Apr 2026 21:40:57 +0200
Subject: [PATCH] chore: button css tweaks

---
 src/_components/nav.vto       | 10 ++++-----
 src/common/pages/dashboard.js |  8 ++++---
 src/styles/diffuse/page.css   | 40 ++++++++++++++++++++++-------------
 3 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/_components/nav.vto b/src/_components/nav.vto
index e6c83b17..6d20fa40 100644
--- a/src/_components/nav.vto
+++ b/src/_components/nav.vto
@@ -4,35 +4,35 @@
 <div class="nav-container">
   <nav id="diffuse-nav">
     <a href="dashboard/" class="button {{ colorClass("dashboard/") }} button--border">
-      <span>
+      <span class="with-icon">
         <i class="ph-fill ph-person"></i>
         Your Diffuse
       </span>
     </a>
 
     <a href="guide/" class="button {{ colorClass("guide/") }} button--border">
-      <span>
+      <span class="with-icon">
         <i class="ph-fill ph-book-open-text"></i>
         Guide
       </span>
     </a>
 
     <a href="featured/" class="button {{ colorClass("featured/") }} button--border">
-      <span>
+      <span class="with-icon">
         <i class="ph-fill ph-sparkle"></i>
         Featured
       </span>
     </a>
 
     <a href="catalogue/" class="button {{ colorClass("catalogue/") }} button--border">
-      <span>
+      <span class="with-icon">
         <i class="ph-fill ph-storefront"></i>
         Catalogue
       </span>
     </a>
 
     <a href="code/" class="button {{ colorClass("code/") }} button--border">
-      <span>
+      <span class="with-icon">
         <i class="ph-fill ph-hammer"></i>
         Code
       </span>
diff --git a/src/common/pages/dashboard.js b/src/common/pages/dashboard.js
index 79f8847b..22f09981 100644
--- a/src/common/pages/dashboard.js
+++ b/src/common/pages/dashboard.js
@@ -161,11 +161,13 @@ function _renderList(output, listEl) {
       <span class="divider"></span>
 
       <button
-        class="button--border button--tiny button--bg-accent button--tr-accent button--transparent with-icon"
+        class="button--border button--tiny button--bg-accent button--tr-accent button--transparent"
         @click="${() => openAddFromURIModal()}"
       >
-        <i class="ph-fill ph-plus-circle"></i>
-        <span class="button__supplementary-text">Add from URI</span>
+        <span class="with-repositioned-icon">
+          <i class="ph-fill ph-plus-circle"></i>
+          <span class="button__supplementary-text">Add from URI</span>
+        </span>
       </button>
 
       <div style="flex: 1"></div>
diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css
index 1089e2ce..1a37990f 100644
--- a/src/styles/diffuse/page.css
+++ b/src/styles/diffuse/page.css
@@ -558,8 +558,9 @@ a.button {
   display: inline-block;
   font-family: inherit;
   font-weight: 500;
-  line-height: var(--leading-tight);
-  padding: var(--space-2xs) calc((var(--space-xs) + var(--space-sm)) / 2);
+  line-height: 0.75;
+  padding: var(--space-xs) calc((var(--space-sm) + var(--space-xs)) / 2);
+  text-box: trim-both cap alphabetic;
   transition-duration: 250ms;
   transition-property: background-color, border-color, opacity;
 
@@ -577,6 +578,10 @@ a.button {
     --button-bg-opacity: 1;
   }
 
+  &:has(.with-icon) {
+    padding-top: calc(var(--space-xs) * 1.1);
+  }
+
   &.button--bg-accent {
     background-color: oklch(from var(--accent) l c h / var(--button-bg-opacity));
   }
@@ -607,9 +612,7 @@ a.button {
 
   &.button--small {
     font-size: var(--fs-sm);
-    line-height: 0.75;
     padding: var(--space-2xs);
-    text-box: trim-both cap alphabetic;
   }
 
   &.button--subtle {
@@ -619,9 +622,7 @@ a.button {
   &.button--tag {
     font-size: var(--fs-2xs);
     font-weight: 600;
-    line-height: 0.75;
     padding: var(--space-3xs);
-    text-box: trim-both cap alphabetic;
     vertical-align: middle;
 
     &.button--border {
@@ -635,8 +636,7 @@ a.button {
 
   &.button--tiny {
     font-size: var(--fs-xs);
-    line-height: 1;
-    padding: var(--space-3xs) calc((var(--space-2xs) + var(--space-3xs)) / 2);
+    padding: calc(var(--space-2xs) * 0.7) calc(var(--space-2xs) * 0.8);
   }
 
   &.button--transparent {
@@ -680,13 +680,6 @@ a.button {
       display: inline-flex;
     }
   }
-
-  & > span {
-    align-items: center;
-    display: inline-flex;
-    gap: var(--space-3xs);
-    padding-top: 1px;
-  }
 }
 
 small {
@@ -736,6 +729,23 @@ button .with-icon--bigger-gap,
   gap: var(--space-2xs);
 }
 
+.with-repositioned-icon {
+  i {
+    display: inline-block;
+    height: 0;
+    position: relative;
+    width: 1em;
+  }
+
+  i::before {
+    bottom: 0;
+    bottom: 0.35cap;
+    left: 0;
+    position: absolute;
+    transform: translateY(50%);
+  }
+}
+
 /**
  * Lists
  */
-- 
2.51.2