@@ -0,0 +1,14 @@
+---
+'@object-ui/app-shell': patch
+---
+
+fix(app-shell): on a phone the navigation drawer closes when an entry opens its page, and the top bar's controls and menus are 44 px touch targets
+
+Clause-②: no
+Metadata-protocol: none
+
+The Console at phone width (375 and 390 px), as a WebView host shows it:
+
+- **The drawer closes on navigation.** Below 768 px the sidebar is a drawer over the page. Tapping one of its entries used to open the page under a drawer that stayed open, so every navigation cost a second tap. A route change now closes the drawer, whichever entry (navigation, favorite, recent) or other control changed the route. Wider windows are unchanged.
+- **44 px controls below `md`.** The top bar's sidebar trigger, product mark, app pill, search, Studio button, inbox bell, AI button and account avatar measured 28 to 34 px; they are 44 px below 768 px. So are the theme and language buttons in the account menu and the page header's Refresh button. The rows of the app switcher, account, theme and language menus are 44 px tall there too (they were 32 and 38 px).
+- **A roomier phone bar.** Below 640 px an app's bar no longer draws the product mark (and its `/` rule) or the Studio button, which made room for the 44 px controls and the page title. Both stay one tap away: the app switcher's menu has "Back to home" and the Studio row, and the drawer's "All apps" goes home. Home and the other platform surfaces keep the product mark.
@@ -316,14 +316,17 @@ export function AppBarCrumbTrail({
  * The product mark — the way home (objectui#12605). One element for every
  * surface that draws it: the home page, the organizations and Studio front
  * doors, and inside every app after the sidebar trigger. A 32 px target
- * holding a 24 px tile on `--primary` with the stack glyph, or the
- * deployment's logo. Named 「PRODUCT home」; `title` keeps the product's name.
+ * (44 px below `md`, a phone's touch target) holding a 24 px tile on
+ * `--primary` with the stack glyph, or the deployment's logo. Inside an app
+ * the bar below `sm` has no room for it beside 44 px controls, so it is not
+ * drawn there: the app switcher's 「Back to home」 and the drawer's 「All apps」
+ * go home (objectstack#29075). Named 「PRODUCT home」; `title` keeps the product's name.
  *
  * `homePath`, not a literal `/home` (objectui#7256): on a deployment that
  * DECLARES a landing this is the declared one, so the mark and the post-login
  * landing name the same screen.
  */
-function ProductHomeMark({ homePath, label }: { homePath: string; label: string }) {
+function ProductHomeMark({ homePath, label, className }: { homePath: string; label: string; className?: string }) {
   const productName = getProductName();
   const logoUrl = getLogoUrl();
   return (
@@ -332,7 +335,7 @@ function ProductHomeMark({ homePath, label }: { homePath: string; label: string
       data-testid="app-bar-product-home"
       aria-label={label}
       title={productName}
-      className="flex size-8 shrink-0 items-center justify-center rounded-md hover:bg-accent transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className={cn('flex size-8 max-md:size-11 shrink-0 items-center justify-center rounded-md hover:bg-accent transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring', className)}
     >
       <span className="flex size-6 items-center justify-center overflow-hidden rounded-md bg-primary text-primary-foreground">
         {logoUrl ? (
@@ -844,13 +847,14 @@ export function AppHeader({
             control inside an app, so it never moves when the sidebar
             collapses; the sidebar itself carries no trigger. */}
         {isApp ? (
-          <LocalizedSidebarTrigger className="shrink-0 mr-1" aria-label={t('common.toggleSidebar', { defaultValue: 'Toggle sidebar' })} />
+          <LocalizedSidebarTrigger className="shrink-0 mr-1 max-md:size-11 max-md:mr-0" aria-label={t('common.toggleSidebar', { defaultValue: 'Toggle sidebar' })} />
         ) : (
           // objectui#12605 — the product mark sits at the same x on every
           // surface. Off an app there is no sidebar to toggle, so the
           // trigger's slot (its 28 px box and its gap) is held empty: the
-          // mark does not jump left when the viewer goes home.
-          <span aria-hidden data-testid="app-bar-trigger-slot" className="h-7 w-7 shrink-0 mr-1" />
+          // mark does not jump left when the viewer goes home. Below `sm` the
+          // mark is not drawn inside an app, so there is nothing to hold.
+          <span aria-hidden data-testid="app-bar-trigger-slot" className="h-7 w-7 shrink-0 mr-1 max-sm:hidden" />
         )}
 
         {/* The product mark — links to home, on every surface: the home
@@ -865,12 +869,13 @@ export function AppHeader({
             defaultValue: '{{product}} home',
             product: getProductName(),
           })}
+          className={isApp ? 'max-sm:hidden' : undefined}
         />
         {isApp && (
           <span
             aria-hidden
             data-testid="app-bar-home-separator"
-            className="mx-1.5 h-[18px] w-px shrink-0 rotate-[20deg] bg-border"
+            className="mx-1.5 h-[18px] w-px shrink-0 rotate-[20deg] bg-border max-sm:hidden"
           />
         )}
 
@@ -1017,7 +1022,7 @@ export function AppHeader({
             <Button
               variant="ghost"
               size="icon"
-              className="min-[960px]:hidden h-8 w-8 shrink-0"
+              className="min-[960px]:hidden h-8 w-8 max-md:size-11 shrink-0"
               data-testid="action:command-palette:open-mobile"
               onClick={openCommandPalette}
               aria-label={searchLabel}
@@ -1039,12 +1044,15 @@ export function AppHeader({
               with no owning package and for a package that is not writable
               (objectui#12615): not rendered, never disabled. An icon button
               at every width, like the bell beside it (objectui#12461): the pencil alone, named
-              「Edit app」 by its aria-label and its tooltip. */}
+              「Edit app」 by its aria-label and its tooltip. Below `sm` the bar
+              keeps its room for 44 px controls and draws neither Studio
+              button; the app switcher's Studio row takes the same target
+              (objectstack#29075). */}
           {studioEntry?.posture === 'edit' && (
             <Button
               variant="ghost"
               size="icon"
-              className="h-8 w-8 shrink-0"
+              className="h-8 w-8 max-md:size-11 max-sm:hidden shrink-0"
               asChild
               data-testid="app-design-in-studio-button"
               aria-label={t('topbar.editApp', { defaultValue: 'Edit app' })}
@@ -1061,7 +1069,7 @@ export function AppHeader({
             <Button
               variant="ghost"
               size="icon"
-              className="h-8 w-8 shrink-0"
+              className="h-8 w-8 max-md:size-11 max-sm:hidden shrink-0"
               asChild
               data-testid="app-view-in-studio-button"
               aria-label={t('topbar.openAppInStudio', { defaultValue: 'Open app in Studio' })}
@@ -1105,7 +1113,7 @@ export function AppHeader({
             <Button
               variant="ghost"
               size="icon"
-              className="h-8 w-8 shrink-0"
+              className="h-8 w-8 max-md:size-11 shrink-0"
               asChild
               aria-label={t('topbar.aiAssistant', { defaultValue: 'AI Assistant' })}
             >
@@ -1190,7 +1198,7 @@ export function AppHeader({
             <Button
               variant="ghost"
               size="icon"
-              className="h-8 w-8 shrink-0 rounded-full"
+              className="h-8 w-8 max-md:size-11 shrink-0 rounded-full"
               aria-label={t('user.accountMenu', { defaultValue: 'Account menu' })}
             >
               <Avatar className="h-7 w-7 rounded-full">
@@ -1201,7 +1209,8 @@ export function AppHeader({
               </Avatar>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="min-w-64 rounded-lg" sideOffset={4}>
+          {/* 44 px rows below `md`, as the app switcher's menu (objectstack#29075). */}
+          <DropdownMenuContent align="end" className="min-w-64 rounded-lg max-md:[&_[role=menuitem]]:min-h-11" sideOffset={4}>
             {/* User identity */}
             <DropdownMenuLabel className="p-0 font-normal">
               <div className="flex items-center gap-2 px-2 py-2">
 
@@ -142,7 +142,7 @@ export function AppSwitcher({ activeAppName, onAppChange, designInStudioPath, st
           type="button"
           data-testid="app-switcher-trigger"
           title={appLabelText}
-          className="flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground/80 hover:bg-accent hover:text-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring max-w-[40vw] sm:max-w-none"
+          className="flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground/80 hover:bg-accent hover:text-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring max-w-[40vw] sm:max-w-none max-md:min-h-11 max-md:min-w-11 max-md:justify-center"
         >
           <AppMark app={activeApp} size="sm" />
           {/* Below `sm` the pill is the glyph alone; `title` names the app
@@ -151,7 +151,11 @@ export function AppSwitcher({ activeAppName, onAppChange, designInStudioPath, st
           <ChevronDown className="hidden sm:block h-3.5 w-3.5 text-muted-foreground shrink-0" />
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" sideOffset={8} className="w-64">
+      {/* Below `md` every row is 44 px tall, a phone's touch target
+          (objectstack#29075); the primitive's rows are 32 px. The class rides
+          on the menu so each row it holds takes it. The top bar's other menus
+          spell the same class. */}
+      <DropdownMenuContent align="start" sideOffset={8} className="w-64 max-md:[&_[role=menuitem]]:min-h-11">
         <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
           {t('layout.appSwitcher.switchApplication', { defaultValue: 'Switch Application' })}
         </DropdownMenuLabel>
 
@@ -380,7 +380,7 @@ export function InboxPopover({
         <Button
           variant="ghost"
           size="icon"
-          className={`h-8 w-8 relative shrink-0 ${pulse ? 'motion-safe:animate-bounce' : ''}`}
+          className={`h-8 w-8 max-md:size-11 relative shrink-0 ${pulse ? 'motion-safe:animate-bounce' : ''}`}
           aria-label={ariaLabel}
           title={t('sidebar.inbox', { defaultValue: 'Inbox' }) as string}
         >
 
@@ -108,12 +108,13 @@ export function LocaleSwitcher() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="h-8 w-8">
+        <Button variant="ghost" size="icon" className="h-8 w-8 max-md:size-11">
           <Globe className="h-4 w-4" />
           <span className="sr-only">{t('console.localeSwitcher.label')}</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="max-h-72 overflow-y-auto">
+      {/* 44 px rows below `md`, as the top bar's menus (objectstack#29075). */}
+      <DropdownMenuContent align="end" className="max-h-72 overflow-y-auto max-md:[&_[role=menuitem]]:min-h-11">
         {offerableLanguages.map((code) => (
           <DropdownMenuItem
             key={code}
 
@@ -10,13 +10,14 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="h-8 w-8">
+        <Button variant="ghost" size="icon" className="h-8 w-8 max-md:size-11">
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">{t('console.theme.toggle')}</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      {/* 44 px rows below `md`, as the top bar's menus (objectstack#29075). */}
+      <DropdownMenuContent align="end" className="max-md:[&_[role=menuitem]]:min-h-11">
         <DropdownMenuItem onClick={() => setTheme("light")} className="gap-2">
           <Sun className="h-4 w-4" />
           {t('console.theme.light')}
 
@@ -204,7 +204,7 @@ export function PageHeader({
       type="button"
       variant="ghost"
       size="icon"
-      className="h-8 w-8 shrink-0"
+      className="h-8 w-8 max-md:size-11 shrink-0"
       onClick={refresh.onRefresh}
       disabled={refresh.busy}
       aria-label={refresh.label}
 
@@ -214,6 +214,18 @@ export function UnifiedSidebar({ activeAppName, railOverlay = false }: UnifiedSi
     };
   }, [isMobile, setOpenMobile]);
 
+  // On a phone the sidebar is a drawer over the page, so a route change closes
+  // it: an entry tapped in the drawer opens its page uncovered, whichever row
+  // (navigation, favorite, recent) it was (objectstack#29075). Keyed on the
+  // route, not on any one row's handler, so a row added later closes it too.
+  const routeKey = `${location.pathname}${location.search}`;
+  const lastRouteKey = React.useRef(routeKey);
+  React.useEffect(() => {
+    if (lastRouteKey.current === routeKey) return;
+    lastRouteKey.current = routeKey;
+    if (isMobile) setOpenMobile(false);
+  }, [routeKey, isMobile, setOpenMobile]);
+
   const { recentItems: allRecentItems } = useRecentItems();
   // A Studio package entry is labelled from the package list (objectui#11863),
   // which this sidebar does not load, so it is left out here rather than drawn
Original file line number	Diff line number	Diff line change
`@@ -380,7 +380,7 @@ export function InboxPopover({`
`380`	`380`	`<Button`
`381`	`381`	`variant="ghost"`
`382`	`382`	`size="icon"`
`383`		- className={`h-8 w-8 relative shrink-0 ${pulse ? 'motion-safe:animate-bounce' : ''}`}
	`383`	+ className={`h-8 w-8 max-md:size-11 relative shrink-0 ${pulse ? 'motion-safe:animate-bounce' : ''}`}
`384`	`384`	`aria-label={ariaLabel}`
`385`	`385`	`title={t('sidebar.inbox', { defaultValue: 'Inbox' }) as string}`
`386`	`386`	`>`