Vertically centre radio and checkbox with label

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>

app/forms/image-upload.tsx

@@ -107,7 +107,7 @@ function Step({ children, state, label, className }: StepProps) {
   return (
     // data-status used only for e2e testing
     <div
-      className={cn('upload-step items-top flex gap-2 px-4 py-3', className)}
+      className={cn('upload-step flex gap-2 px-4 py-3', className)}
       data-testid={`upload-step: ${label}`}
       data-status={status}
     >

app/ui/lib/Checkbox.tsx

@@ -44,8 +44,11 @@ export const Checkbox = ({
   className,
   ...inputProps
 }: CheckboxProps) => (
-  <label className="items-top inline-flex">
-    <span className="relative h-4 w-4">
+  <label className="text-sans-md inline-flex items-start">
+    {/* Center the 1rem (h-4) checkbox with the first line of text.
+        1lh is the line height, so (1lh - 1rem) / 2 is the top offset
+        that vertically centers the indicator within that line. */}
+    <span className="relative mt-[calc((1lh-1rem)/2)] h-4 w-4">
       <input
         className={cn(inputStyle, className)}
         type="checkbox"

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,15 +26,18 @@ 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">
+    {/* Center the 1rem (h-4) radio button with the first line of text.
+        1lh is the line height, so (1lh - 1rem) / 2 is the top offset
+        that vertically centers the indicator within that line. */}
+    <span className="relative mt-[calc((1lh-1rem)/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-inverse light:bg-(--theme-accent-600) pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
     </span>
 
-    {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
+    {children && <span className="text-default ml-2.5">{children}</span>}
   </label>
 )
 

app/ui/lib/SideModal.tsx

@@ -73,8 +73,8 @@ export function SideModal({
               />
             }
           >
-            <div className="items-top mt-8 mb-4">
-              <BaseDialog.Title className="text-sans-2xl text-raise flex w-full items-center justify-between pr-8 break-words">
+            <div className="mt-8 mb-4">
+              <BaseDialog.Title className="text-sans-2xl text-raise flex w-full items-center justify-between pr-8 wrap-break-word">
                 {title}
               </BaseDialog.Title>
               {subtitle}