Merge remote-tracking branch 'origin/main' into fix/v1397-derive

src/components/settings/_card-header.tsx

@@ -89,7 +89,12 @@ export function SettingsCardHeader({
             {titleAccessory}
           </div>
           {status ? (
-            <div className="flex shrink-0 items-center gap-2">{status}</div>
+            // `max-w-full` caps the slot at the row once it wraps under the
+            // title, so a status line longer than a phone row wraps inside
+            // the card instead of widening the page.
+            <div className="flex max-w-full shrink-0 items-center gap-2">
+              {status}
+            </div>
           ) : null}
         </div>
         {/* One sentence, one text run. This slot deliberately carries no

src/components/settings/ai/fallback-chain-card.tsx

@@ -294,7 +294,7 @@ function AddProviderControl({
   const [picked, setPicked] = useState<string>(addable[0] ?? "");
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       <NativeSelect
         aria-label={t("settings.ai.providerChain.addProvider")}
         value={picked}

src/components/settings/dashboard-layout-section.tsx

@@ -869,7 +869,7 @@ function SortableWidgetRow({
       style={style}
       data-slot="widget-row"
       data-dragging={isDragging ? "true" : undefined}
-      className={`border-border bg-background/30 flex min-h-12 items-center gap-2 rounded-md border px-3 py-2 ${
+      className={`border-border bg-background/30 flex min-h-12 flex-wrap items-center gap-2 rounded-md border px-3 py-2 sm:flex-nowrap ${
         isDragging ? "ring-primary z-10 opacity-90 shadow-lg ring-2" : ""
       }`}
     >
@@ -898,7 +898,12 @@ function SortableWidgetRow({
       <span className="flex-1 truncate text-sm" title={labels.widgetLabel}>
         {labels.widgetLabel}
       </span>
-      <div className="flex w-12 justify-center">
+      {/* On a phone the two switches and two arrows (~250 px) left the name
+          five characters ("Gewic…"). Below `sm` the controls wrap onto a
+          second line, right-aligned under the column heads, and the name
+          keeps the first line to itself. */}
+      <span className="basis-full sm:hidden" aria-hidden="true" />
+      <div className="flex w-12 justify-center max-sm:ml-auto">
         <Switch
           checked={tileChecked}
           onCheckedChange={(v) => onToggleTile(widget.id, v)}

src/components/settings/low-stock-card.tsx

@@ -234,8 +234,6 @@ export function LowStockCard({
               disabled={!isAuthenticated || saving}
               aria-label={t("notifications.lowStock.toggleAria")}
             />
-            <p className="text-sm">{t("notifications.lowStock.detail")}</p>
-
             <span className="text-muted-foreground text-xs">
               {enabled
                 ? t("notifications.lowStock.statusOn")
@@ -244,6 +242,7 @@ export function LowStockCard({
           </label>
         }
       />
+      <p className="text-sm">{t("notifications.lowStock.detail")}</p>
       {enabled && (
         <div className="flex min-h-11 items-center gap-3">
           <label htmlFor="low-stock-days" className="text-sm font-medium">

src/components/settings/mood-reminder-card.tsx

@@ -193,8 +193,6 @@ export function MoodReminderCard({
               disabled={!isAuthenticated || saving}
               aria-label={t("notifications.moodReminder.toggleAria")}
             />
-            <p className="text-sm">{t("notifications.moodReminder.detail")}</p>
-
             <span className="text-muted-foreground text-xs">
               {enabled
                 ? t("notifications.moodReminder.statusOn")
@@ -203,6 +201,7 @@ export function MoodReminderCard({
           </label>
         }
       />
+      <p className="text-sm">{t("notifications.moodReminder.detail")}</p>
       {enabled && (
         <div className="flex min-h-11 items-center gap-3">
           <label htmlFor="mood-reminder-hour" className="text-sm font-medium">

src/components/settings/report-selection/report-scope-picker.tsx

@@ -112,8 +112,11 @@ export function ReportScopePicker({
       {/* The one-click way to a complete report. An inline action row
           (UI-STANDARDS §11): the sentence wraps, the action stays beside it.
           It is offered, never applied — and it stays offered so a person can
-          come back to the standard set after experimenting. */}
-      <div className="flex items-start justify-between gap-3">
+          come back to the standard set after experimenting. On a phone the
+          action's own label is wider than half the row, so beside it the
+          sentence shrank to a one-word column and the button ran past the
+          card edge: there the action drops under the sentence instead. */}
+      <div className="flex items-start justify-between gap-3 max-sm:flex-col">
         <p
           id={hintId}
           className="text-muted-foreground min-w-0 flex-1 text-xs"