fix: settings mobile layout, silent failure on language save

- Settings sidebar was a fixed-width vertical list with no responsive
  breakpoint, squeezing the form into a sliver on mobile. Turn it into
  a horizontal scrollable tab bar under md, vertical sidebar above.
- setLocale() fired the PATCH and swallowed the result with
  .catch(() => {}) — never checked res.ok, no success/failure feedback.
  A failed save (expired session, network blip) looked identical to a
  successful one. Now returns a boolean, reverts local state on
  failure, and the settings form toasts success/failure.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/settings/settings-form.tsx

@@ -118,7 +118,15 @@ export function SettingsForm({ user }: { user: UserProps }) {
       <section className="rounded-xl border p-6 space-y-4">
         <h2 className="font-semibold text-lg">{t("language")}</h2>
         <p className="text-sm text-muted-foreground">{t("languageDescription")}</p>
-        <Select defaultValue={user.locale} onValueChange={(v) => setLocale(v as Locale)}>
+        <Select
+          defaultValue={user.locale}
+          onValueChange={(v) => {
+            void setLocale(v as Locale).then((ok) => {
+              if (ok) toast.success(t_common("saved"));
+              else toast.error(t_common("saveFailed"));
+            });
+          }}
+        >
           <SelectTrigger className="w-48">
             <SelectValue />
           </SelectTrigger>

apps/web/components/settings/settings-sidebar.tsx

@@ -21,16 +21,16 @@ export function SettingsSidebar() {
   const t = useTranslations("settings");
 
   return (
-    <nav className="w-48 shrink-0 sticky top-6">
-      <ul className="space-y-0.5">
+    <nav className="w-full md:w-48 md:shrink-0 md:sticky md:top-6">
+      <ul className="flex overflow-x-auto gap-1 pb-2 -mx-4 px-4 md:mx-0 md:px-0 md:flex-col md:overflow-visible md:gap-0.5 md:pb-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {NAV_ITEMS.map(({ href, key, icon: Icon, exact }) => {
           const active = exact ? pathname === href : pathname.startsWith(href);
           return (
-            <li key={href}>
+            <li key={href} className="shrink-0 md:shrink">
               <Link
                 href={href}
                 className={cn(
-                  "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors",
+                  "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors",
                   active
                     ? "bg-accent text-accent-foreground font-medium"
                     : "text-muted-foreground hover:text-foreground hover:bg-accent/50"