Control scale: Button/IconButton primitives, two-height tokens, app-wide migration

src/app/components/SettingsPopover.tsx

@@ -23,6 +23,7 @@ import { type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopover } from '../hooks/usePopover';
 import { Icon } from './Icon';
+import { IconButton } from './IconButton';
 import styles from './SettingsPopover.module.css';
 
 /** Focus the first interactive control on open (any kind — these are forms). */
@@ -55,18 +56,15 @@ export function SettingsPopover({
 
   return (
     <div className={styles.wrap}>
-      <button
+      <IconButton
         ref={triggerRef}
-        type="button"
-        className={styles.gear}
+        label={label}
         aria-expanded={open}
         aria-controls={id}
-        aria-label={label}
-        title={label}
         onClick={toggle}
       >
         <Icon name="settings" />
-      </button>
+      </IconButton>
       {open &&
         createPortal(
           <div ref={setPopNode} id={id} className={styles.pop} role="group" aria-label={title}>