Phone: Settings in the menu, sliding Settings layout

The left panel shows Settings on a phone again, with Install app moved above
the divider. On a phone, Settings is a full-width list of sections; the chosen
one slides in from the right over it and back out on ‹ Settings or the phone's
Back (each section is its own URL; opened directly, ‹ Settings goes to the
list). A section's own first heading is hidden there when it repeats the title
in the header. The account rows wrap on a narrow screen instead of running off
it. Desktop Settings is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/routes/MailLayout.tsx

@@ -980,19 +980,22 @@ export function MailLayout() {
           {/* Plugin-contributed sidebar sections (SPEC §11.3 sidebar.section). */}
           {!collapsed && <PluginSlot name="sidebar.section" />}
         </nav>
+        {mobile && (
+          <div className="p-2 text-[15px]">
+            <InstallAppEntry onDone={() => setDrawerOpen(false)} />
+          </div>
+        )}
         <div className="border-t border-app-border p-2 text-[15px]">
-          {/* Settings has no phone layout yet either. */}
           <Link
             className={`flex items-center gap-2.5 rounded-lg py-2 text-app-muted hover:bg-app-hover hover:text-app-fg ${
               collapsed ? "justify-center px-0" : "px-3"
-            } ${mobile ? "hidden" : ""}`}
+            }`}
             title={collapsed ? t("nav.settings") : undefined}
             to="/settings"
           >
             <Icon name="settings" size={22} />
             {!collapsed && t("nav.settings")}
           </Link>
-          {mobile && <InstallAppEntry onDone={() => setDrawerOpen(false)} />}
           <button
             className={`wm-online-only flex w-full items-center gap-2.5 rounded-lg py-2 text-left text-app-muted hover:bg-app-hover hover:text-app-fg ${
               collapsed ? "justify-center px-0" : "px-3"