fix: preserve recipe progress view state

Refs #1, #5

control/app.js

@@ -106,7 +106,7 @@ function renderActiveRecipe() {
   activeRecipeName.textContent = recipe.name || "Untitled recipe";
   const original = recipe.originalRecipeYield;
   activeRecipeYield.textContent = original && original !== recipe.recipeYield
-    ? `Yield: ${recipe.recipeYield} (original: ${original})`
+    ? `Yield: ${recipe.recipeYield} (originally ${original})`
     : `Yield: ${recipe.recipeYield || "Not specified"}`;
   renderChecklist(activeIngredients, recipe.recipeIngredient || [], progress.completedIngredients, "ingredient",
     recipe.recipeIngredientStatus || []);
@@ -162,7 +162,6 @@ async function updateProgress(kind, index, completed) {
       body: JSON.stringify({ kind, index, completed })
     });
     applyState(state);
-    render();
   } catch (error) {
     status.textContent = error.message;
     render();

control/styles.css

@@ -122,8 +122,15 @@ button {
 }
 
 .checklist li { padding-left: .2rem; }
-.checklist label { display: flex; gap: .6rem; align-items: flex-start; }
-.checklist input { margin-top: .25rem; min-width: 1.1rem; min-height: 1.1rem; }
+.checklist label { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-weight: normal; }
+.checklist input {
+  width: 1.2rem;
+  min-width: 1.2rem;
+  height: 1.2rem;
+  min-height: 1.2rem;
+  margin: .18rem 0 0;
+  padding: 0;
+}
 .checklist .completed { color: #777; text-decoration: line-through; }
 .checklist .quantity-warning { color: #876500; }
 .checklist .quantity-error { color: #a2342b; }
@@ -135,3 +142,12 @@ button {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+@media (max-width: 560px) {
+  main { padding: 18px 14px 44px; }
+  header { align-items: flex-start; flex-direction: column; }
+  .header-actions { width: 100%; justify-content: stretch; }
+  .header-actions button { flex: 1 1 auto; }
+  .active-recipe { margin: 1rem 0; padding: .85rem; }
+  .checklist { gap: .55rem; padding-left: 1.2rem; }
+}