@@ -0,0 +1,16 @@
+---
+'@object-ui/app-shell': patch
+---
+
+fix(app-shell): the inbox popover fits a 375 px phone, and its controls and the account menu's notification switches are 44 px tap targets below `md`
+
+Clause-②: no
+Metadata-protocol: none
+
+The mobile app hosts the Console, so below `md` these are phone screens.
+
+- **The inbox popover fits.** It stays `w-96` on desktop, but is never wider than the viewport less 0.5 rem on each side, and keeps that gutter from the edges. At 375 px it was 384 px wide and its right 9 px were cut off, which hid the Activity tab, "Mark all read" and the per-group "Mark read".
+- **Its controls are 44 px tall below `md`:** "Mark all read", the three tabs, the Unread and All filters, "View all notifications", "View approvals", "Open Approvals Inbox" and "View all activity". They measured 16 to 36 px. Below `md` the tabs also drop their icons and share the strip by content width, so all three fit.
+- **Each notification switch in the account menu is now the control of its whole row.** The rows are "In-app alerts" and "Desktop notifications". A tap anywhere on the row toggles the switch, and below `md` the row is 44 px tall. The switch alone is 44 × 24. A blocked desktop switch stays off whatever is tapped, and turning it on still asks for permission from that tap.
+
+Desktop sizes do not change.
@@ -105,6 +105,18 @@ function openingTab(hasItems: Record<InboxTab, boolean>, picked: InboxTab | null
   return INBOX_TABS.find((t) => hasItems[t]) ?? picked ?? 'notifications';
 }
 
+/**
+ * The phone floor for a tap target: 44 px tall below `md`, the width at which
+ * the Console is the phone app's UI. Desktop sizes are untouched.
+ */
+const PHONE_TAP = 'max-md:min-h-11';
+
+/**
+ * Below `md` the three tabs share the strip by content width with their icons
+ * dropped, so the third tab is not pushed past a 359 px popover.
+ */
+const TAB_TRIGGER_CLASS = `text-xs gap-1.5 data-[state=active]:bg-transparent ${PHONE_TAP} max-md:flex-auto max-md:px-1.5`;
+
 export interface InboxPopoverProps {
   notifications: InboxNotification[];
   unreadCount: number;
@@ -384,7 +396,14 @@ export function InboxPopover({
           )}
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="end" sideOffset={8} className="w-96 p-0">
+      {/* Never wider than the viewport less a 0.5 rem gutter on each side, and
+          kept that far from its edges: a 375 px phone is narrower than w-96. */}
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        collisionPadding={8}
+        className="w-96 max-w-[calc(100vw-1rem)] p-0"
+      >
         <div className="flex items-center justify-between px-3 pt-3 pb-1">
           <div className="text-sm font-semibold">
             {t('sidebar.inbox', { defaultValue: 'Inbox' })}
@@ -393,7 +412,7 @@ export function InboxPopover({
             <button
               type="button"
               onClick={onMarkAllRead}
-              className="text-xs text-muted-foreground hover:text-foreground"
+              className={`text-xs text-muted-foreground hover:text-foreground ${PHONE_TAP} max-md:px-2`}
             >
               {t('notifications.markAllRead', { defaultValue: 'Mark all read' })}
             </button>
@@ -438,9 +457,9 @@ export function InboxPopover({
           </div>
         )}
         <Tabs value={shownTab} onValueChange={handleTabChange} className="w-full">
-          <TabsList className="w-full justify-start rounded-none border-b bg-transparent px-1 h-9">
-            <TabsTrigger value="notifications" className="text-xs gap-1.5 data-[state=active]:bg-transparent">
-              <Bell className="h-3.5 w-3.5" />
+          <TabsList className="w-full justify-start rounded-none border-b bg-transparent px-1 h-9 max-md:h-auto">
+            <TabsTrigger value="notifications" className={TAB_TRIGGER_CLASS}>
+              <Bell className="h-3.5 w-3.5 max-md:hidden" aria-hidden />
               {t('sidebar.notifications', { defaultValue: 'Notifications' })}
               {unreadTopics > 0 && (
                 <span
@@ -451,8 +470,8 @@ export function InboxPopover({
                 </span>
               )}
             </TabsTrigger>
-            <TabsTrigger value="approvals" className="text-xs gap-1.5 data-[state=active]:bg-transparent">
-              <CheckSquare className="h-3.5 w-3.5" />
+            <TabsTrigger value="approvals" className={TAB_TRIGGER_CLASS}>
+              <CheckSquare className="h-3.5 w-3.5 max-md:hidden" aria-hidden />
               {t('sidebar.approvals', { defaultValue: 'Approvals' })}
               {pendingApprovalsCount > 0 && (
                 <span
@@ -464,8 +483,8 @@ export function InboxPopover({
               )}
             </TabsTrigger>
             {showActivity && (
-              <TabsTrigger value="activity" className="text-xs gap-1.5 data-[state=active]:bg-transparent">
-                <ActivityIcon className="h-3.5 w-3.5" />
+              <TabsTrigger value="activity" className={TAB_TRIGGER_CLASS}>
+                <ActivityIcon className="h-3.5 w-3.5 max-md:hidden" aria-hidden />
                 {t('sidebar.activityFeed', { defaultValue: 'Activity feed' })}
               </TabsTrigger>
             )}
@@ -479,7 +498,7 @@ export function InboxPopover({
               <button
                 type="button"
                 onClick={() => setNotifFilter('unread')}
-                className={`text-xs px-2 py-1 rounded-md transition-colors ${
+                className={`text-xs px-2 py-1 rounded-md transition-colors ${PHONE_TAP} max-md:min-w-11 max-md:px-3 ${
                   notifFilter === 'unread'
                     ? 'bg-accent text-foreground font-medium'
                     : 'text-muted-foreground hover:text-foreground'
@@ -493,7 +512,7 @@ export function InboxPopover({
               <button
                 type="button"
                 onClick={() => setNotifFilter('all')}
-                className={`text-xs px-2 py-1 rounded-md transition-colors ${
+                className={`text-xs px-2 py-1 rounded-md transition-colors ${PHONE_TAP} max-md:min-w-11 max-md:px-3 ${
                   notifFilter === 'all'
                     ? 'bg-accent text-foreground font-medium'
                     : 'text-muted-foreground hover:text-foreground'
@@ -624,7 +643,7 @@ export function InboxPopover({
               <button
                 type="button"
                 onClick={goToAllNotifications}
-                className="text-xs text-primary hover:underline"
+                className={`text-xs text-primary hover:underline ${PHONE_TAP} max-md:w-full`}
               >
                 {t('notifications.viewAll', { defaultValue: 'View all notifications' })}
               </button>
@@ -642,7 +661,7 @@ export function InboxPopover({
                       count: pendingApprovalsCount,
                     })}
                   </div>
-                  <Button size="sm" className="mt-3" onClick={goToApprovals}>
+                  <Button size="sm" className={`mt-3 ${PHONE_TAP}`} onClick={goToApprovals}>
                     {t('notifications.viewApprovals', { defaultValue: 'View approvals' })}
                   </Button>
                 </>
@@ -656,7 +675,7 @@ export function InboxPopover({
                   <button
                     type="button"
                     onClick={goToApprovals}
-                    className="mt-2 text-xs text-primary hover:underline"
+                    className={`mt-2 text-xs text-primary hover:underline ${PHONE_TAP} max-md:px-3`}
                   >
                     {t('notifications.openApprovalsInbox', { defaultValue: 'Open Approvals Inbox' })}
                   </button>
@@ -731,7 +750,7 @@ export function InboxPopover({
                 <button
                   type="button"
                   onClick={goToAllActivity}
-                  className="text-xs text-primary hover:underline"
+                  className={`text-xs text-primary hover:underline ${PHONE_TAP} max-md:w-full`}
                 >
                   {t('layout.activityFeed.viewAll', { defaultValue: 'View all activity' })}
                 </button>
 
@@ -39,6 +39,13 @@ import { Switch } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { useNotificationPreferences } from '../hooks/notificationPreferences.js';
 
+/**
+ * Each row is the `label` of its switch, so the whole row toggles it: the
+ * switch alone is 44 × 24, under the 44 px tap floor, and below `md` (the
+ * phone app's UI) the row is 44 px tall.
+ */
+const ROW_CLASS = 'flex cursor-pointer items-center justify-between gap-3 px-2 py-1.5 text-sm max-md:min-h-11';
+
 export function NotificationPreferencesMenu() {
   const { t } = useObjectTranslation();
   const {
@@ -65,7 +72,7 @@ export function NotificationPreferencesMenu() {
 
   return (
     <>
-      <div className="flex items-center justify-between gap-3 px-2 py-1.5 text-sm">
+      <label className={ROW_CLASS}>
         <span className="text-foreground/80">
           {t('notifications.toastEnabled', { defaultValue: 'In-app alerts' })}
         </span>
@@ -75,8 +82,8 @@ export function NotificationPreferencesMenu() {
           data-testid="notification-toast-toggle"
           aria-label={t('notifications.toastEnabled', { defaultValue: 'In-app alerts' })}
         />
-      </div>
-      <div className="flex items-center justify-between gap-3 px-2 py-1.5 text-sm">
+      </label>
+      <label className={ROW_CLASS}>
         <span className={desktopDisabled ? 'text-muted-foreground' : 'text-foreground/80'}>
           {t('notifications.desktopEnabled', { defaultValue: 'Desktop notifications' })}
         </span>
@@ -91,7 +98,7 @@ export function NotificationPreferencesMenu() {
           data-testid="notification-desktop-toggle"
           aria-label={t('notifications.desktopEnabled', { defaultValue: 'Desktop notifications' })}
         />
-      </div>
+      </label>
       {hint && (
         <p className="px-2 pb-1.5 text-xs text-muted-foreground" data-testid="notification-desktop-hint">
           {hint}
 
@@ -0,0 +1,123 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * The inbox fits a phone and its controls are tappable there (objectstack#29076).
+ *
+ * The mobile app hosts the Console, so below `md` this popover is a phone UI.
+ * Measured on a 375 px viewport, the popover was `w-96` (384 px) and lost its
+ * right 9 px, and its own controls were 16–36 px tall. These pin the two
+ * rules: the popover is capped at the viewport less a gutter, and every
+ * control the popover draws besides the rows (which are tall by content)
+ * carries the phone tap floor.
+ *
+ * jsdom has no layout, so these read the classes that carry the rule; the
+ * pixel reading is the run record on the card.
+ *
+ * Nothing is mocked: the real Radix popover and tabs, router and i18n pack.
+ */
+
+import React from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { act, cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nProvider } from '@object-ui/i18n';
+
+import { InboxPopover, type InboxNotification } from '../InboxPopover';
+import type { ActivityItem } from '../ActivityFeed';
+
+afterEach(() => {
+  cleanup();
+  window.sessionStorage.clear();
+});
+
+const PHONE_TAP = 'max-md:min-h-11';
+
+const notifications: InboxNotification[] = [
+  { id: 'n1', type: 'task.assigned', title: 'Task assigned', is_read: false, created_at: '2026-10-01T10:00:00Z' },
+  { id: 'n2', type: 'task.assigned', title: 'Task assigned', is_read: false, created_at: '2026-10-01T10:01:00Z' },
+  { id: 'n3', type: 'lead.assigned', title: 'Lead assigned', is_read: false, created_at: '2026-10-01T10:02:00Z' },
+];
+
+const activities: ActivityItem[] = [
+  { id: 'a1', type: 'update', objectName: 'account', user: 'Priya', description: 'updated a record', timestamp: '2026-10-01T10:00:00Z' },
+];
+
+function bell(pendingApprovalsCount: number) {
+  return (
+    <MemoryRouter>
+      <I18nProvider config={{ defaultLanguage: 'en', detectBrowserLanguage: false }} persistLanguage={false}>
+        <InboxPopover
+          notifications={notifications}
+          unreadCount={notifications.length}
+          pendingApprovalsCount={pendingApprovalsCount}
+          activity={{ value: activities, status: 'ready', readable: true }}
+          onMarkAllRead={() => {}}
+          onMarkRead={() => {}}
+        />
+      </I18nProvider>
+    </MemoryRouter>
+  );
+}
+
+function openInbox() {
+  fireEvent.click(screen.getByRole('button', { name: 'Open inbox' }));
+  return screen.getByRole('dialog');
+}
+
+function choose(dialog: HTMLElement, name: RegExp) {
+  act(() => {
+    fireEvent.mouseDown(within(dialog).getByRole('tab', { name }), { button: 0, ctrlKey: false });
+  });
+}
+
+describe('InboxPopover at phone width (objectstack#29076)', () => {
+  it('is never wider than the viewport less a 0.5 rem gutter on each side', () => {
+    render(bell(0));
+    const dialog = openInbox();
+    expect(dialog.className).toContain('max-w-[calc(100vw-1rem)]');
+    // the desktop width stays
+    expect(dialog.className).toContain('w-96');
+  });
+
+  it('gives the Notifications tab controls the 44 px phone floor', () => {
+    render(bell(0));
+    const dialog = openInbox();
+    for (const name of [/^Mark all read$/, /^Unread/, /^All$/, /^View all notifications$/]) {
+      expect(within(dialog).getByRole('button', { name }).className, String(name)).toContain(PHONE_TAP);
+    }
+    // "All" is one short word: it is 44 px wide only because of its own floor
+    expect(within(dialog).getByRole('button', { name: /^All$/ }).className).toContain('max-md:min-w-11');
+  });
+
+  it('gives all three tabs the floor and drops their icons below md so they share the strip', () => {
+    render(bell(2));
+    const dialog = openInbox();
+    const tabs = within(dialog).getAllByRole('tab');
+    expect(tabs).toHaveLength(3);
+    for (const tab of tabs) {
+      expect(tab.className).toContain(PHONE_TAP);
+      const icon = tab.querySelector('svg');
+      expect(icon?.getAttribute('class')).toContain('max-md:hidden');
+    }
+  });
+
+  it('gives the Approvals tab button, in both of its states, the floor', () => {
+    render(bell(2));
+    let dialog = openInbox();
+    choose(dialog, /Approvals/);
+    expect(within(dialog).getByRole('button', { name: 'View approvals' }).className).toContain(PHONE_TAP);
+    cleanup();
+
+    render(bell(0));
+    dialog = openInbox();
+    choose(dialog, /Approvals/);
+    expect(within(dialog).getByRole('button', { name: 'Open Approvals Inbox' }).className).toContain(PHONE_TAP);
+  });
+
+  it('gives the Activity footer the floor', () => {
+    render(bell(0));
+    const dialog = openInbox();
+    choose(dialog, /Activity/);
+    expect(within(dialog).getByRole('button', { name: 'View all activity' }).className).toContain(PHONE_TAP);
+  });
+});