From f91cd343bee2bb1a82af93f0b58c436c64e4e929 Mon Sep 17 00:00:00 2001
From: JD <jd@jds.haus>
Date: Wed, 28 Oct 2026 13:39:13 -0400
Subject: [PATCH] fix(mobile): keep the press transition to the press's own
 properties

`all` also sped up Run's mode colours, Stop's confirming state and the armed Ctrl key. The browser test now reads the transition at rest, since its 250ms hold would also pass the old 0.2s one.
---
 src/web/public/mobile.css                 |  5 +++--
 test/phone-press-feedback.browser.test.ts | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/web/public/mobile.css b/src/web/public/mobile.css
index d3285339..1b05ab73 100644
--- a/src/web/public/mobile.css
+++ b/src/web/public/mobile.css
@@ -3480,14 +3480,15 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
      hover rules own box-shadow, so a background or shadow :active lost to them
      on every non-og skin. Nothing on these buttons sets transform or filter
      (the base .btn-toolbar:active nudge sits at lower specificity), so one rule
-     reads the same on all of them. 80ms so a quick tap shows the press at all. */
+     reads the same on all of them. 80ms so a quick tap shows the press at all,
+     on the press's own properties rather than `all`. */
   .toolbar .btn-toolbar,
   .btn-voice-mobile,
   .btn-attach-mobile,
   .btn-settings-mobile,
   .accessory-btn {
     -webkit-tap-highlight-color: transparent;
-    transition: all 80ms ease;
+    transition: transform 80ms ease, filter 80ms ease, background-color 80ms ease, border-color 80ms ease;
   }
 
   .toolbar .btn-toolbar:active,
diff --git a/test/phone-press-feedback.browser.test.ts b/test/phone-press-feedback.browser.test.ts
index 53ce81b4..d9ba9012 100644
--- a/test/phone-press-feedback.browser.test.ts
+++ b/test/phone-press-feedback.browser.test.ts
@@ -42,6 +42,12 @@ const TARGETS = [
 
 const PRESSED_SCALE = 'matrix(0.94, 0, 0, 0.94, 0, 0)';
 
+/** The press transition, read at rest: the 250ms hold below would also pass a slower one. */
+const PRESS_TRANSITION = {
+  property: 'transform, filter, background-color, border-color',
+  duration: '0.08s, 0.08s, 0.08s, 0.08s',
+};
+
 function toolbarMarkup(): string {
   const start = html.indexOf('<footer class="toolbar">');
   const end = html.indexOf('</footer>', start);
@@ -96,6 +102,10 @@ describe('phone toolbar and accessory press feedback in Chromium', () => {
     const read = () =>
       target.evaluate((el) => ({ transform: getComputedStyle(el).transform, filter: getComputedStyle(el).filter }));
     const rest = await read();
+    const transition = await target.evaluate((el) => ({
+      property: getComputedStyle(el).transitionProperty,
+      duration: getComputedStyle(el).transitionDuration,
+    }));
     await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
     await page.mouse.down();
     await page.waitForTimeout(250);
@@ -104,7 +114,7 @@ describe('phone toolbar and accessory press feedback in Chromium', () => {
     await page.mouse.move(0, 0);
     await page.mouse.up();
     await page.waitForTimeout(250);
-    return { rest, held };
+    return { rest, held, transition };
   }
 
   for (const [skins, brightness] of [
@@ -120,6 +130,7 @@ describe('phone toolbar and accessory press feedback in Chromium', () => {
               name,
               rest: { transform: 'none', filter: 'none' },
               held: { transform: PRESSED_SCALE, filter: brightness },
+              transition: PRESS_TRANSITION,
             });
           }
         } finally {
@@ -140,6 +151,7 @@ describe('phone toolbar and accessory press feedback in Chromium', () => {
           name,
           rest: { transform: 'none', filter: 'none' },
           held: { transform: 'none', filter: brightness },
+          transition: PRESS_TRANSITION,
         });
       }
     } finally {