diff --git a/src/widgets/layouts/calendar.tsx b/src/widgets/layouts/calendar.tsx
index 171a4437..ef25e63e 100644
--- a/src/widgets/layouts/calendar.tsx
+++ b/src/widgets/layouts/calendar.tsx
@@ -192,7 +192,7 @@ export const AgendaLayout: Layout = ({ s, p, f, now, height }) => {
       iconName="calendar"
       title={f.t('widgets.calendar.agenda', 'Agenda')}
       click={open(links.calendar())}
-      trailing={<Fab p={p} iconName="plus" size={compact ? 28 : 32} click={open(links.calendar())} />}
+      trailing={<Fab p={p} iconName="plus" size={compact ? 28 : 32} slop={compact ? 5 : 6} click={open(links.calendar())} />}
     />
   );
   const days = agendaDays(s.calendar.events, now, 14);
@@ -1008,7 +1008,8 @@ export const UpNextLayout: Layout = ({ s, p, f, now }) => {
     : f.t('widgets.calendar.join', 'Join');
 
   return (
-    <Surface p={p} style={{ padding: 14 }}>
+    // 36dp buttons in a 48dp tap area (slop 6), which takes 6dp of the bottom padding.
+    <Surface p={p} style={{ padding: 14, paddingBottom: 8 }}>
       <FlexWidget {...open(links.event(e))} style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
         <OverlapWidget style={{ width: 64, height: 64 }}>
           <SvgWidget svg={ring(left.fraction, p.border, p.primary, 5)} style={{ width: 64, height: 64 }} />
@@ -1040,9 +1041,9 @@ export const UpNextLayout: Layout = ({ s, p, f, now }) => {
       <Spacer />
       <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
         {e.videoUrl ? (
-          <Button p={p} variant="primary" iconName="video" label={joinLabel} height={36} flex={1} click={open(e.videoUrl)} />
+          <Button p={p} variant="primary" iconName="video" label={joinLabel} height={36} flex={1} slop={6} click={open(e.videoUrl)} />
         ) : (
-          <Button p={p} iconName="calendar" label={f.t('widgets.calendar.open', 'Open')} height={36} flex={1} click={open(links.event(e))} />
+          <Button p={p} iconName="calendar" label={f.t('widgets.calendar.open', 'Open')} height={36} flex={1} slop={6} click={open(links.event(e))} />
         )}
         <Spacer size={8} horizontal />
         <Button
@@ -1051,6 +1052,7 @@ export const UpNextLayout: Layout = ({ s, p, f, now }) => {
           label={f.t('widgets.calendar.running_late', 'Running late')}
           height={36}
           flex={1}
+          slop={6}
           click={open(late)}
         />
       </FlexWidget>
diff --git a/src/widgets/layouts/hubs.tsx b/src/widgets/layouts/hubs.tsx
index 1550e872..99deeb3b 100644
--- a/src/widgets/layouts/hubs.tsx
+++ b/src/widgets/layouts/hubs.tsx
@@ -432,7 +432,7 @@ export const RecentFilesLayout: Layout = ({ s, p, f, now, height }) => {
       title={f.t('widgets.shortcuts.files', 'Files')}
       count={f.t('widgets.files.recent', 'Recently changed')}
       click={open(links.files())}
-      trailing={<GhostIcon p={p} iconName="upload" click={open(links.files())} />}
+      trailing={<GhostIcon p={p} iconName="upload" size={40} click={open(links.files())} />}
     />
   );
   const items = s.files.items;
diff --git a/src/widgets/layouts/mail.tsx b/src/widgets/layouts/mail.tsx
index 50dcfeeb..23e28832 100644
--- a/src/widgets/layouts/mail.tsx
+++ b/src/widgets/layouts/mail.tsx
@@ -60,9 +60,9 @@ export const InboxLayout: Layout = ({ s, p, f, now, width, height }) => {
           <FlexWidget style={{ flexDirection: 'row', alignItems: 'center' }}>
             <Spacer size={8} horizontal />
             <CountText p={p} f={f} unread={unread} total={total} short={narrow} />
-            {compact || narrow ? null : <GhostIcon p={p} iconName="search" click={open(links.search())} />}
+            {compact || narrow ? null : <GhostIcon p={p} iconName="search" size={headerHeight} click={open(links.search())} />}
             <Spacer size={6} horizontal />
-            <Fab p={p} iconName="edit" size={compact ? 28 : 32} click={open(links.compose())} />
+            <Fab p={p} iconName="edit" size={compact ? 28 : 32} slop={compact ? 5 : 6} click={open(links.compose())} />
           </FlexWidget>
         )}
       />
@@ -115,7 +115,9 @@ export const TriageLayout: Layout = ({ s, p, f, now, width, widgetId, local }) =
   const allFit = buttonWidth(labels.archive) + buttonWidth(labels.trash) + buttonWidth(labels.reply) <= room;
   const replyFits = 2 * 32 + buttonWidth(labels.reply) <= room;
   return (
-    <Surface p={p} style={{ padding: 12 }}>
+    // The buttons draw 32dp tall in a 48dp tap area (slop 8), which takes the
+    // gap above them and 8dp of the bottom padding.
+    <Surface p={p} style={{ padding: 12, paddingBottom: 4 }}>
       <FlexWidget {...open(links.message(current))} style={{ width: 'match_parent', flex: 1 }}>
         <FlexWidget style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent' }}>
           <Avatar initials={current.initials} color={current.color} size={32} />
@@ -139,15 +141,14 @@ export const TriageLayout: Layout = ({ s, p, f, now, width, widgetId, local }) =
         {current.preview && !notice ? <Txt text={current.preview} color={p.muted} size={13} lines={2} /> : null}
       </FlexWidget>
       {notice ? <NoticeBar p={p} f={f} notice={notice} /> : null}
-      <Spacer size={8} />
       <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
-        <Button p={p} label={allFit ? labels.archive : undefined} iconName="archive" flex={1} click={action('archive', target)} />
+        <Button p={p} label={allFit ? labels.archive : undefined} iconName="archive" flex={1} slop={8} click={action('archive', target)} />
         <Spacer size={6} horizontal />
-        <Button p={p} label={allFit ? labels.trash : undefined} iconName="trash" flex={1} click={action('trash', target)} />
+        <Button p={p} label={allFit ? labels.trash : undefined} iconName="trash" flex={1} slop={8} click={action('trash', target)} />
         <Spacer size={6} horizontal />
-        <Button p={p} label={allFit || replyFits ? labels.reply : undefined} iconName="reply" variant="primary" flex={1} click={open(links.reply(current))} />
+        <Button p={p} label={allFit || replyFits ? labels.reply : undefined} iconName="reply" variant="primary" flex={1} slop={8} click={open(links.reply(current))} />
         <Spacer size={6} horizontal />
-        <Button p={p} iconName="chevronRight" click={action('triageNext', { widgetId, id: current.id })} />
+        <Button p={p} iconName="chevronRight" slop={8} click={action('triageNext', { widgetId, id: current.id })} />
       </FlexWidget>
     </Surface>
   );
diff --git a/src/widgets/layouts/plans.tsx b/src/widgets/layouts/plans.tsx
index b56a0214..4551989e 100644
--- a/src/widgets/layouts/plans.tsx
+++ b/src/widgets/layouts/plans.tsx
@@ -98,6 +98,8 @@ export const InvitationsLayout: Layout = ({ s, p, f, height }) => {
   const pad = height < 140 ? 10 : 14;
   const showPeople = inv.participants.length > 0 && height >= 132;
   const buttonHeight = height < 116 ? 28 : 32;
+  // Tap area of 48dp around the buttons; it takes the bottom padding.
+  const slop = Math.min(pad, Math.round((48 - buttonHeight) / 2));
 
   const label = (
     inv.organizerName
@@ -111,7 +113,7 @@ export const InvitationsLayout: Layout = ({ s, p, f, height }) => {
   const notice = noticeFor(s.notice, 'rsvp');
 
   return (
-    <Surface p={p} style={{ padding: pad }}>
+    <Surface p={p} style={{ padding: pad, paddingBottom: pad - slop }}>
       <FlexWidget {...open(links.event(inv))} style={{ flexDirection: 'row', width: 'match_parent' }}>
         <FlexWidget
           style={{
@@ -156,12 +158,13 @@ export const InvitationsLayout: Layout = ({ s, p, f, height }) => {
           label={f.t('widgets.invites.accept', 'Accept')}
           flex={1}
           height={buttonHeight}
+          slop={slop}
           click={reply('accepted')}
         />
         <Spacer size={6} horizontal />
-        <Button p={p} label={f.t('widgets.invites.maybe', 'Maybe')} flex={1} height={buttonHeight} click={reply('tentative')} />
+        <Button p={p} label={f.t('widgets.invites.maybe', 'Maybe')} flex={1} height={buttonHeight} slop={slop} click={reply('tentative')} />
         <Spacer size={6} horizontal />
-        <Button p={p} label={f.t('widgets.invites.decline', 'Decline')} flex={1} height={buttonHeight} click={reply('declined')} />
+        <Button p={p} label={f.t('widgets.invites.decline', 'Decline')} flex={1} height={buttonHeight} slop={slop} click={reply('declined')} />
       </FlexWidget>
     </Surface>
   );
@@ -360,7 +363,9 @@ export const FreeTimeLayout: Layout = ({ s, p, f, now, width, height }) => {
   };
 
   return (
-    <Surface p={p} style={{ paddingHorizontal: 14, paddingVertical: tier.pad }}>
+    // The full-width button draws tier.button tall; its tap area also takes
+    // the bottom padding (slop).
+    <Surface p={p} style={{ paddingHorizontal: 14, paddingTop: tier.pad, paddingBottom: tier.button ? 0 : tier.pad }}>
       <FlexWidget
         {...open(links.calendar())}
         style={{ flexDirection: 'row', alignItems: 'center', width: 'match_parent', height: FREE_HEADLINE_HEIGHT }}
@@ -427,7 +432,6 @@ export const FreeTimeLayout: Layout = ({ s, p, f, now, width, height }) => {
           </FlexWidget>
         ) : null}
       </FlexWidget>
-      {tier.button ? <Spacer size={tier.gap} /> : null}
       <Spacer />
       {tier.button ? (
         <FlexWidget style={{ flexDirection: 'row', width: 'match_parent' }}>
@@ -437,6 +441,8 @@ export const FreeTimeLayout: Layout = ({ s, p, f, now, width, height }) => {
             label={f.t('widgets.free.mail', 'Mail my free times')}
             flex={1}
             height={tier.button}
+            // Above, the tap area takes the gap and any height to spare; below, the padding.
+            slop={{ top: Math.min(tier.pad, tier.gap + Math.max(0, height - freeTierHeight(tier))), bottom: tier.pad }}
             click={mail}
           />
         </FlexWidget>
@@ -481,7 +487,7 @@ export const TasksLayout: Layout = ({ s, p, f, now, height }) => {
         title={f.t('widgets.tasks.title', 'Tasks')}
         count={f.t('widgets.tasks.open_count', '{count} open', { count: openCount })}
         click={open(links.calendar())}
-        trailing={<Fab p={p} iconName="plus" size={compact ? 28 : 32} click={open(links.calendar())} />}
+        trailing={<Fab p={p} iconName="plus" size={compact ? 28 : 32} slop={compact ? 4 : 6} click={open(links.calendar())} />}
       />
       {notice ? (
         <FlexWidget style={{ width: 'match_parent', paddingHorizontal: 8, paddingTop: 6, paddingBottom: 6 }}>
@@ -665,6 +671,8 @@ export const BirthdaysLayout: Layout = ({ s, p, f, now, width, height }) => {
                 variant="primary"
                 iconName="send"
                 label={narrow ? undefined : f.t('widgets.birthdays.send_wishes', 'Send wishes')}
+                // The row is 50dp; the tap area takes its full height.
+                slop={Math.floor((BIRTHDAY_ROW_HEIGHT - 32) / 2)}
                 click={open(links.compose({ to: wish, subject: f.t('widgets.birthdays.wishes_subject', 'Happy birthday!') }))}
               />
             ) : null}
diff --git a/src/widgets/primitives.tsx b/src/widgets/primitives.tsx
index dd5b401b..e82b8dfc 100644
--- a/src/widgets/primitives.tsx
+++ b/src/widgets/primitives.tsx
@@ -222,6 +222,7 @@ export function Button({
   click,
   height = 32,
   flex,
+  slop = 0,
 }: {
   p: WidgetPalette;
   label?: string;
@@ -230,18 +231,26 @@ export function Button({
   click?: WidgetClick;
   height?: number;
   flex?: number;
+  /**
+   * Transparent tap area above and below the drawn button, so a 32dp button
+   * still takes a 48dp tap. Take the same amount off the spacing around it.
+   */
+  slop?: number | { top: number; bottom: number };
 }) {
   const primary = variant === 'primary';
+  const [slopTop, slopBottom] = typeof slop === 'number' ? [slop, slop] : [slop.top, slop.bottom];
   const fg = primary ? p.primaryFg : p.fg;
-  return (
+  const face = (
     <FlexWidget
-      {...click}
+      {...(slop ? {} : click)}
       style={{
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
         height,
-        ...(flex ? { flex } : { paddingHorizontal: label ? 12 : 0, width: label ? 'wrap_content' : height }),
+        ...(slop && flex
+          ? { width: 'match_parent' as const }
+          : flex ? { flex } : { paddingHorizontal: label ? 12 : 0, width: label ? 'wrap_content' : height }),
         borderRadius: 6,
         backgroundColor: primary ? p.primary : p.bg,
         ...(primary ? {} : { borderWidth: 1, borderColor: p.input }),
@@ -252,6 +261,19 @@ export function Button({
       {label ? <TextWidget text={label} maxLines={1} style={{ color: fg, fontSize: 13, fontWeight: '500' }} /> : null}
     </FlexWidget>
   );
+  if (!slop) return face;
+  return (
+    <FlexWidget
+      {...click}
+      style={{
+        paddingTop: slopTop,
+        paddingBottom: slopBottom,
+        ...(flex ? { flex } : { width: label ? 'wrap_content' : height }),
+      }}
+    >
+      {face}
+    </FlexWidget>
+  );
 }
 
 /** Round primary action (compose, new event), the webmail's floating button. */
@@ -260,15 +282,18 @@ export function Fab({
   iconName,
   size = 32,
   click,
+  slop = 0,
 }: {
   p: WidgetPalette;
   iconName: IconName;
   size?: number;
   click?: WidgetClick;
+  /** Transparent tap area around the button (see Button). */
+  slop?: number;
 }) {
-  return (
+  const face = (
     <FlexWidget
-      {...click}
+      {...(slop ? {} : click)}
       style={{
         width: size,
         height: size,
@@ -281,6 +306,12 @@ export function Fab({
       <Icon name={iconName} color={p.primaryFg} size={Math.round(size / 2)} />
     </FlexWidget>
   );
+  if (!slop) return face;
+  return (
+    <FlexWidget {...click} style={{ padding: slop, justifyContent: 'center', alignItems: 'center' }}>
+      {face}
+    </FlexWidget>
+  );
 }
 
 /** Icon-only ghost button (search in a header). */