feat: timer unit selector + fix ingredient list alignment (v0.56.0)

Step timer input was seconds-only, no unit — a 90-minute braise meant
typing 5400. Added a seconds/minutes/hours <select> next to the input;
StepRow gets a timerUnit field, converted to seconds at submit. Editing
an existing recipe (and the AI-regenerate flow) picks the largest unit
that divides evenly into the stored seconds so it displays naturally
instead of always falling back to raw seconds.

Ingredient list (serving-scaler.tsx): the quantity column used
min-w-[3rem] on a flex child, which is only a *minimum* — any row whose
formatted quantity text (e.g. an appended "(~2 tbsp)" conversion) exceeded
that width pushed just that row's ingredient name further right,
breaking alignment across the list. Switched the list to a CSS grid with
`display: contents` on each <li>, so the quantity column's width is
shared across every row instead of sized per-row.

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

apps/web/app/(app)/recipes/[id]/edit/page.tsx

@@ -49,12 +49,23 @@ export default async function EditRecipePage({ params }: Params) {
       unit: ing.unit ?? "",
       note: ing.note ?? "",
     })),
-    steps: recipe.steps.map((step) => ({
-      id: step.id,
-      instruction: step.instruction,
-      timerSeconds: step.timerSeconds ? String(step.timerSeconds) : "",
-      appliesTo: step.appliesTo ?? [],
-    })),
+    steps: recipe.steps.map((step) => {
+      // Show the largest unit that divides evenly into the stored seconds,
+      // so editing a 90-minute braise shows "90 min" rather than "5400 sec".
+      const seconds = step.timerSeconds ?? 0;
+      const timer = seconds > 0 && seconds % 3600 === 0
+        ? { value: String(seconds / 3600), unit: "hours" as const }
+        : seconds > 0 && seconds % 60 === 0
+        ? { value: String(seconds / 60), unit: "minutes" as const }
+        : { value: seconds > 0 ? String(seconds) : "", unit: "seconds" as const };
+      return {
+        id: step.id,
+        instruction: step.instruction,
+        timerSeconds: timer.value,
+        timerUnit: timer.unit,
+        appliesTo: step.appliesTo ?? [],
+      };
+    }),
     photos: recipe.photos.map((photo) => ({
       key: photo.storageKey,
       isCover: photo.isCover,