fix: bottle total capacity backward compatibility (#149)

* fix: bottle total capacity shows dash for old medications

Old medications created before the totalPills column was added had
totalPills=null. This caused two issues:

1. MedDetailModal showed '—' instead of the actual capacity in the
   Package Details section (while the Stock section showed correct values)
2. Edit form showed an empty Total Capacity field on mobile

Fix: Fall back to packageSize (looseTablets for bottles) when totalPills
is null, matching the behavior already used in MedicationsPage and the
stock display section.

Added test for backward compatibility scenario.

* chore: retrigger CI

frontend/src/components/MedDetailModal.tsx

@@ -235,7 +235,7 @@ export function MedDetailModal({
 							) : (
 								<div className="med-detail-item">
 									<span className="med-detail-label">{t("form.totalCapacity")}</span>
-									<span className="med-detail-value">{selectedMed.totalPills ?? "—"}</span>
+									<span className="med-detail-value">{(selectedMed.totalPills ?? packageSize) || "—"}</span>
 								</div>
 							)}
 							{selectedMed.pillWeightMg && (

frontend/src/hooks/useMedicationForm.ts

@@ -207,7 +207,11 @@ export function useMedicationForm(): UseMedicationFormReturn {
 			packCount: String(med.packCount),
 			blistersPerPack: String(med.blistersPerPack),
 			pillsPerBlister: String(med.pillsPerBlister),
-			totalPills: med.totalPills ? String(med.totalPills) : "",
+			totalPills: med.totalPills
+				? String(med.totalPills)
+				: med.packageType === "bottle" && med.looseTablets
+					? String(med.looseTablets)
+					: "",
 			looseTablets: String(med.looseTablets),
 			pillWeightMg: med.pillWeightMg ? String(med.pillWeightMg) : "",
 			doseUnit: med.doseUnit ?? "mg",

frontend/src/test/components/MedDetailModal.test.tsx

@@ -569,6 +569,29 @@ describe("MedDetailModal bottle package type", () => {
 		expect(screen.queryByText("refill.packs")).not.toBeInTheDocument();
 	});
 
+	it("shows looseTablets as total capacity fallback when totalPills is null (backward compat)", () => {
+		// Old medications created before totalPills column existed
+		const oldBottleMed: Medication = {
+			...bottleMed,
+			totalPills: null,
+			looseTablets: 180,
+		};
+		const oldCoverage: Coverage = {
+			name: "Bottle Med",
+			medsLeft: 138,
+			daysLeft: 138,
+			depletionDate: "2024-06-01",
+			depletionTime: Date.now() + 138 * 86400000,
+			nextDose: null,
+		};
+		render(<MedDetailModal {...bottleProps} selectedMed={oldBottleMed} coverage={{ all: [oldCoverage] }} />);
+
+		// Total Capacity should show 180 (looseTablets), not "—"
+		const capacityLabel = screen.getByText(/form\.totalCapacity/i);
+		const capacityValue = capacityLabel.closest(".med-detail-item")?.querySelector(".med-detail-value");
+		expect(capacityValue?.textContent).toBe("180");
+	});
+
 	it("shows total pills input in edit stock modal for bottle type", () => {
 		render(<MedDetailModal {...bottleProps} showEditStockModal={true} />);