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/components/recipe/serving-scaler.tsx

@@ -129,14 +129,19 @@ export function ServingScaler({
         </div>
       )}
 
-      <ul className="space-y-2">
+      {/* grid + `contents` on each <li>, not flex — a flex child's quantity
+          column only has a *minimum* width, so it drifts row-to-row once any
+          value's text (e.g. an appended "(~2 tbsp)" conversion) exceeds that
+          minimum. A shared grid track sizes to the widest cell across every
+          row, so the name column lines up regardless of quantity length. */}
+      <ul className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-2 text-sm">
         {ingredients
           .sort((a, b) => a.order - b.order)
           .map((ing) => {
             const aiIng = aiScaledIngredients?.find((s) => s.rawName === ing.rawName);
             return (
-              <li key={ing.id} className="flex gap-2 text-sm group">
-                <span className="font-medium tabular-nums min-w-[3rem] text-right">
+              <li key={ing.id} className="contents group">
+                <span className="font-medium tabular-nums text-right whitespace-nowrap">
                   {aiIng
                     ? formatIngredientQuantity(aiIng.quantity, aiIng.unit, unitPref)
                     : formatIngredientQuantity(ing.quantity, ing.unit, unitPref, {