From d02e30346218bf5ec80ffa5fe604b348e5c9f9ad Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Fri, 6 Feb 2026 16:56:20 +0000
Subject: [PATCH 1/4] Vertically centre radio and checkbox properly

---
 app/forms/access-util.tsx |  2 +-
 app/ui/lib/Checkbox.tsx   | 34 ++++++++++++++++++----------------
 app/ui/lib/Radio.tsx      | 21 ++++++++++-----------
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx
index e30aa44785..cbc2da639f 100644
--- a/app/forms/access-util.tsx
+++ b/app/forms/access-util.tsx
@@ -106,7 +106,7 @@ export function RoleRadioField<
         className="mt-2"
       >
         {R.reverse(allRoles).map((role) => (
-          <Radio name="roleName" key={role} value={role} alignTop>
+          <Radio name="roleName" key={role} value={role}>
             <div className="text-sans-md text-raise">
               {capitalize(role).replace('_', ' ')}
             </div>
diff --git a/app/ui/lib/Checkbox.tsx b/app/ui/lib/Checkbox.tsx
index cb5d028865..2ed89ea724 100644
--- a/app/ui/lib/Checkbox.tsx
+++ b/app/ui/lib/Checkbox.tsx
@@ -46,22 +46,24 @@ export const Checkbox = ({
   className,
   ...inputProps
 }: CheckboxProps) => (
-  <label className="items-top inline-flex">
-    <span className="relative h-4 w-4">
-      <input
-        className={cn(inputStyle, className)}
-        type="checkbox"
-        ref={(el) => {
-          if (el) {
-            el.indeterminate = !!indeterminate
-          }
-        }}
-        {...inputProps}
-      />
-      {inputProps.checked && !indeterminate && <Check />}
-      {indeterminate && <Indeterminate />}
-    </span>
+  <label className="text-sans-md">
+    <div className="inline-flex h-lh shrink-0 grow-0 items-center">
+      <span className="relative h-4 w-4">
+        <input
+          className={cn(inputStyle, className)}
+          type="checkbox"
+          ref={(el) => {
+            if (el) {
+              el.indeterminate = !!indeterminate
+            }
+          }}
+          {...inputProps}
+        />
+        {inputProps.checked && !indeterminate && <Check />}
+        {indeterminate && <Indeterminate />}
+      </span>
 
-    {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
+      {children && <span className="text-default ml-2.5">{children}</span>}
+    </div>
   </label>
 )
diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx
index 38f4d8fedb..bcddc79473 100644
--- a/app/ui/lib/Radio.tsx
+++ b/app/ui/lib/Radio.tsx
@@ -17,10 +17,7 @@ import cn from 'classnames'
 import type { ComponentProps } from 'react'
 
 // input type is fixed to "radio"
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'> & {
-  /** Align radio button with top of content instead of center (useful for multi-line content) */
-  alignTop?: boolean
-}
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'>
 
 const fieldStyles = `
   peer appearance-none absolute outline-hidden
@@ -29,13 +26,15 @@ const fieldStyles = `
   disabled:hover:bg-transparent
 `
 
-export const Radio = ({ children, className, alignTop, ...inputProps }: RadioProps) => (
-  <label className={cn('inline-flex', alignTop ? 'items-start' : 'items-center')}>
-    <span className="relative h-4 w-4 shrink-0">
-      <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
-      {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
-      <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
-    </span>
+export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
+  <label className="text-sans-md flex">
+    <div className="inline-flex h-lh shrink-0 grow-0 items-center">
+      <span className="relative h-4 w-4 shrink-0">
+        <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
+        {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
+        <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
+      </span>
+    </div>
 
     {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
   </label>

From 3ff3ceb554ab4b46033d22d2fda308710a3b4c9e Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Fri, 6 Feb 2026 16:57:16 +0000
Subject: [PATCH 2/4] Remove unneeded class

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

diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx
index bcddc79473..13e1a7cddd 100644
--- a/app/ui/lib/Radio.tsx
+++ b/app/ui/lib/Radio.tsx
@@ -36,7 +36,7 @@ export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
       </span>
     </div>
 
-    {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
+    {children && <span className="text-default ml-2.5">{children}</span>}
   </label>
 )
 

From c272dd15ff7c8cfb69fd11327d0d965ab67c53f7 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Fri, 6 Feb 2026 17:36:48 +0000
Subject: [PATCH 3/4] Revert "Vertically centre radio and checkbox properly"

This reverts commit d02e30346218bf5ec80ffa5fe604b348e5c9f9ad.
---
 app/forms/access-util.tsx |  2 +-
 app/ui/lib/Checkbox.tsx   | 34 ++++++++++++++++------------------
 app/ui/lib/Radio.tsx      | 21 +++++++++++----------
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx
index cbc2da639f..e30aa44785 100644
--- a/app/forms/access-util.tsx
+++ b/app/forms/access-util.tsx
@@ -106,7 +106,7 @@ export function RoleRadioField<
         className="mt-2"
       >
         {R.reverse(allRoles).map((role) => (
-          <Radio name="roleName" key={role} value={role}>
+          <Radio name="roleName" key={role} value={role} alignTop>
             <div className="text-sans-md text-raise">
               {capitalize(role).replace('_', ' ')}
             </div>
diff --git a/app/ui/lib/Checkbox.tsx b/app/ui/lib/Checkbox.tsx
index 2ed89ea724..cb5d028865 100644
--- a/app/ui/lib/Checkbox.tsx
+++ b/app/ui/lib/Checkbox.tsx
@@ -46,24 +46,22 @@ export const Checkbox = ({
   className,
   ...inputProps
 }: CheckboxProps) => (
-  <label className="text-sans-md">
-    <div className="inline-flex h-lh shrink-0 grow-0 items-center">
-      <span className="relative h-4 w-4">
-        <input
-          className={cn(inputStyle, className)}
-          type="checkbox"
-          ref={(el) => {
-            if (el) {
-              el.indeterminate = !!indeterminate
-            }
-          }}
-          {...inputProps}
-        />
-        {inputProps.checked && !indeterminate && <Check />}
-        {indeterminate && <Indeterminate />}
-      </span>
+  <label className="items-top inline-flex">
+    <span className="relative h-4 w-4">
+      <input
+        className={cn(inputStyle, className)}
+        type="checkbox"
+        ref={(el) => {
+          if (el) {
+            el.indeterminate = !!indeterminate
+          }
+        }}
+        {...inputProps}
+      />
+      {inputProps.checked && !indeterminate && <Check />}
+      {indeterminate && <Indeterminate />}
+    </span>
 
-      {children && <span className="text-default ml-2.5">{children}</span>}
-    </div>
+    {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
   </label>
 )
diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx
index 13e1a7cddd..4cd39c7137 100644
--- a/app/ui/lib/Radio.tsx
+++ b/app/ui/lib/Radio.tsx
@@ -17,7 +17,10 @@ import cn from 'classnames'
 import type { ComponentProps } from 'react'
 
 // input type is fixed to "radio"
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'>
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'> & {
+  /** Align radio button with top of content instead of center (useful for multi-line content) */
+  alignTop?: boolean
+}
 
 const fieldStyles = `
   peer appearance-none absolute outline-hidden
@@ -26,15 +29,13 @@ const fieldStyles = `
   disabled:hover:bg-transparent
 `
 
-export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
-  <label className="text-sans-md flex">
-    <div className="inline-flex h-lh shrink-0 grow-0 items-center">
-      <span className="relative h-4 w-4 shrink-0">
-        <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
-        {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
-        <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
-      </span>
-    </div>
+export const Radio = ({ children, className, alignTop, ...inputProps }: RadioProps) => (
+  <label className={cn('inline-flex', alignTop ? 'items-start' : 'items-center')}>
+    <span className="relative h-4 w-4 shrink-0">
+      <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
+      {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
+      <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
+    </span>
 
     {children && <span className="text-default ml-2.5">{children}</span>}
   </label>

From 57d1d49a4e881da49015cc75905808dd9bc684d3 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Fri, 6 Feb 2026 17:40:28 +0000
Subject: [PATCH 4/4] Try extra clever version

---
 app/forms/access-util.tsx |  2 +-
 app/ui/lib/Checkbox.tsx   |  4 ++--
 app/ui/lib/Radio.tsx      | 11 ++++-------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx
index e30aa44785..cbc2da639f 100644
--- a/app/forms/access-util.tsx
+++ b/app/forms/access-util.tsx
@@ -106,7 +106,7 @@ export function RoleRadioField<
         className="mt-2"
       >
         {R.reverse(allRoles).map((role) => (
-          <Radio name="roleName" key={role} value={role} alignTop>
+          <Radio name="roleName" key={role} value={role}>
             <div className="text-sans-md text-raise">
               {capitalize(role).replace('_', ' ')}
             </div>
diff --git a/app/ui/lib/Checkbox.tsx b/app/ui/lib/Checkbox.tsx
index cb5d028865..e56fd3d0e3 100644
--- a/app/ui/lib/Checkbox.tsx
+++ b/app/ui/lib/Checkbox.tsx
@@ -46,8 +46,8 @@ export const Checkbox = ({
   className,
   ...inputProps
 }: CheckboxProps) => (
-  <label className="items-top inline-flex">
-    <span className="relative h-4 w-4">
+  <label className="text-sans-md items-top inline-flex">
+    <span className="relative mt-[calc((1lh-16px)/2)] h-4 w-4">
       <input
         className={cn(inputStyle, className)}
         type="checkbox"
diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx
index 4cd39c7137..3ff29a80e6 100644
--- a/app/ui/lib/Radio.tsx
+++ b/app/ui/lib/Radio.tsx
@@ -17,10 +17,7 @@ import cn from 'classnames'
 import type { ComponentProps } from 'react'
 
 // input type is fixed to "radio"
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'> & {
-  /** Align radio button with top of content instead of center (useful for multi-line content) */
-  alignTop?: boolean
-}
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'>
 
 const fieldStyles = `
   peer appearance-none absolute outline-hidden
@@ -29,9 +26,9 @@ const fieldStyles = `
   disabled:hover:bg-transparent
 `
 
-export const Radio = ({ children, className, alignTop, ...inputProps }: RadioProps) => (
-  <label className={cn('inline-flex', alignTop ? 'items-start' : 'items-center')}>
-    <span className="relative h-4 w-4 shrink-0">
+export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
+  <label className="text-sans-md inline-flex items-start">
+    <span className="relative mt-[calc((1lh-16px)/2)] h-4 w-4 shrink-0">
       <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
       {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
       <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />