From 26a689f4c2306bbfb55f6a272617c040b6af1df3 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 1 Apr 2025 16:40:12 +0100
Subject: [PATCH 1/6] Surf it, scroll it, pause it, click it

---
 app/ui/styles/components/button.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css
index 9575fde921..96c4918fe6 100644
--- a/app/ui/styles/components/button.css
+++ b/app/ui/styles/components/button.css
@@ -9,6 +9,9 @@
 .ox-button {
   @apply relative;
 }
+.ox-button:active {
+  @apply translate-y-px;
+}
 .ox-button:after {
   content: '';
   @apply absolute bottom-0 left-0 right-0 top-0 rounded border border-current opacity-[0.05];

From 4101df7443e17f1d8097ce400f05dad0078a6a92 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 1 Apr 2025 16:46:09 +0100
Subject: [PATCH 2/6] Ignore disabled buttons

---
 app/ui/styles/components/button.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css
index 96c4918fe6..485d8851ea 100644
--- a/app/ui/styles/components/button.css
+++ b/app/ui/styles/components/button.css
@@ -9,7 +9,7 @@
 .ox-button {
   @apply relative;
 }
-.ox-button:active {
+.ox-button:active:not(.visually-disabled) {
   @apply translate-y-px;
 }
 .ox-button:after {

From 3d2c3e3970d64a0e9427428859aacc703b7c3cd8 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 1 Apr 2025 16:49:43 +0100
Subject: [PATCH 3/6] Apply to more buttons

---
 app/components/MoreActionsMenu.tsx  | 2 +-
 app/components/TopBar.tsx           | 2 +-
 app/ui/lib/Button.tsx               | 2 +-
 app/ui/styles/components/button.css | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index f176cb534a..d369e132b2 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -30,7 +30,7 @@ export const MoreActionsMenu = ({
       <DropdownMenu.Trigger
         aria-label={label}
         className={cn(
-          'flex items-center justify-center rounded border border-default hover:bg-tertiary',
+          'active-clicked flex items-center justify-center rounded border border-default hover:bg-tertiary',
           isSmall ? 'h-6 w-6' : 'h-8 w-8'
         )}
       >
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index e2660fcb68..e192c336a5 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -161,7 +161,7 @@ function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
-        className="flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover"
+        className="active-clicked flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover"
         aria-label="Switch between system and silo"
       >
         <div className="flex items-center text-tertiary">
diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx
index e7b27f383d..a80d6acd61 100644
--- a/app/ui/lib/Button.tsx
+++ b/app/ui/lib/Button.tsx
@@ -36,7 +36,7 @@ export const buttonStyle = ({
   variant = 'primary',
 }: ButtonStyleProps = {}) => {
   return cn(
-    'ox-button elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0',
+    'ox-button active-clicked elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0',
     `btn-${variant}`,
     sizeStyle[size],
     variant === 'danger'
diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css
index 485d8851ea..037bea3b4f 100644
--- a/app/ui/styles/components/button.css
+++ b/app/ui/styles/components/button.css
@@ -9,7 +9,7 @@
 .ox-button {
   @apply relative;
 }
-.ox-button:active:not(.visually-disabled) {
+.active-clicked:active:not(.visually-disabled) {
   @apply translate-y-px;
 }
 .ox-button:after {

From 570ef837b49308c2e1620a4f71c6b8eff893d192 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 1 Apr 2025 16:57:54 +0100
Subject: [PATCH 4/6] Update CopyToClipboard.tsx

---
 app/ui/lib/CopyToClipboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/lib/CopyToClipboard.tsx b/app/ui/lib/CopyToClipboard.tsx
index df0331f531..f00b2523a2 100644
--- a/app/ui/lib/CopyToClipboard.tsx
+++ b/app/ui/lib/CopyToClipboard.tsx
@@ -53,7 +53,7 @@ export const CopyToClipboard = ({
   return (
     <button
       className={cn(
-        'relative h-5 w-5 rounded',
+        'active-clicked relative h-5 w-5 rounded',
         hasCopied
           ? 'text-accent bg-accent-secondary'
           : 'text-tertiary hover:text-default hover:bg-hover',

From 19cd205a2a1fc692822cc5f425dba76cfdf2a49d Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Wed, 2 Apr 2025 10:18:42 +0100
Subject: [PATCH 5/6] Don't translate dropdown

---
 app/components/DocsPopover.tsx     |  6 +++--
 app/components/MoreActionsMenu.tsx | 17 +++++++------
 app/components/TopBar.tsx          | 40 +++++++++++++++---------------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index 9bb858c0d5..c1aa9f2fda 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -45,8 +45,10 @@ type DocsPopoverProps = {
 export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps) => {
   return (
     <Popover>
-      <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
-        <Info16Icon aria-label="Links to docs" className="shrink-0" />
+      <PopoverButton>
+        <div className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
+          <Info16Icon aria-label="Links to docs" className="shrink-0" />
+        </div>
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index d369e132b2..3c78ef84e6 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -27,14 +27,15 @@ export const MoreActionsMenu = ({
 }: MoreActionsMenuProps) => {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        aria-label={label}
-        className={cn(
-          'active-clicked flex items-center justify-center rounded border border-default hover:bg-tertiary',
-          isSmall ? 'h-6 w-6' : 'h-8 w-8'
-        )}
-      >
-        <More12Icon />
+      <DropdownMenu.Trigger aria-label={label}>
+        <div
+          className={cn(
+            'active-clicked flex items-center justify-center rounded border border-default hover:bg-tertiary',
+            isSmall ? 'h-6 w-6' : 'h-8 w-8'
+          )}
+        >
+          <More12Icon />
+        </div>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content className="mt-2">{children}</DropdownMenu.Content>
     </DropdownMenu.Root>
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index e192c336a5..08144a23ce 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -132,17 +132,18 @@ function UserMenu() {
   const { me } = useCurrentUser()
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        className={cn(
-          buttonStyle({ size: 'sm', variant: 'ghost' }),
-          'flex items-center gap-1.5 !px-2 !border-secondary'
-        )}
-        aria-label="User menu"
-      >
-        <Profile16Icon className="text-tertiary" />
-        <span className="normal-case text-sans-md text-default">
-          {me.displayName || 'User'}
-        </span>
+      <DropdownMenu.Trigger aria-label="User menu">
+        <div
+          className={cn(
+            buttonStyle({ size: 'sm', variant: 'ghost' }),
+            'flex items-center gap-1.5 !px-2 !border-secondary'
+          )}
+        >
+          <Profile16Icon className="text-tertiary" />
+          <span className="normal-case text-sans-md text-default">
+            {me.displayName || 'User'}
+          </span>
+        </div>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content gap={8}>
         <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
@@ -160,16 +161,15 @@ function UserMenu() {
 function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        className="active-clicked flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover"
-        aria-label="Switch between system and silo"
-      >
-        <div className="flex items-center text-tertiary">
-          {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
+      <DropdownMenu.Trigger aria-label="Switch between system and silo">
+        <div className="active-clicked flex items-center rounded border px-2 py-1.5 text-sans-md text-default border-secondary hover:bg-hover">
+          <div className="flex items-center text-tertiary">
+            {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
+          </div>
+          <div className="ml-1.5 mr-3">{level === 'system' ? 'System' : 'Silo'}</div>
+          {/* aria-hidden is a tip from the Reach docs */}
+          <SelectArrows6Icon className="text-quaternary" aria-hidden />
         </div>
-        <div className="ml-1.5 mr-3">{level === 'system' ? 'System' : 'Silo'}</div>
-        {/* aria-hidden is a tip from the Reach docs */}
-        <SelectArrows6Icon className="text-quaternary" aria-hidden />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content className="mt-2 max-h-80 overflow-y-auto" anchor="bottom start">
         <SystemSiloItem to={pb.silos()} label="System" isSelected={level === 'system'} />

From d403163245d30bcac070f58e108b97cbd23a1d15 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Wed, 2 Apr 2025 10:18:49 +0100
Subject: [PATCH 6/6] Make motion safe

---
 app/ui/styles/components/button.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css
index 037bea3b4f..f8d9553ab4 100644
--- a/app/ui/styles/components/button.css
+++ b/app/ui/styles/components/button.css
@@ -10,7 +10,7 @@
   @apply relative;
 }
 .active-clicked:active:not(.visually-disabled) {
-  @apply translate-y-px;
+  @apply motion-safe:translate-y-px;
 }
 .ox-button:after {
   content: '';