From 51ae7f7408b262f2bebdcf5cfd8d28d836d2d8e3 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Wed, 8 Apr 2026 21:28:15 +0200
Subject: [PATCH] chore: button css tweaks

---
 src/guide.vto               |  2 +-
 src/styles/diffuse/page.css | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/guide.vto b/src/guide.vto
index d797c879..8c4a4add 100644
--- a/src/guide.vto
+++ b/src/guide.vto
@@ -36,7 +36,7 @@ title: Guide | Diffuse
     }
 
     i[style] {
-      @media (max-width: 35rem) {
+      @media (width < 35rem) {
         display: none;
       }
     }
diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css
index 1a37990f..403eae96 100644
--- a/src/styles/diffuse/page.css
+++ b/src/styles/diffuse/page.css
@@ -563,6 +563,7 @@ a.button {
   text-box: trim-both cap alphabetic;
   transition-duration: 250ms;
   transition-property: background-color, border-color, opacity;
+  white-space: nowrap;
 
   & * {
     pointer-events: none;
@@ -730,6 +731,25 @@ button .with-icon--bigger-gap,
 }
 
 .with-repositioned-icon {
+  position: relative;
+
+  @media (width < 42rem) {
+    &:has(.button__supplementary-text) {
+      display: inline-block;
+      height: 1cap;
+      width: 1em;
+
+      i {
+        height: auto;
+        height: 0.8cap;
+        left: 0;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
   i {
     display: inline-block;
     height: 0;
-- 
2.51.2