diff --git a/src/components/medications/medication-categories-sheet.tsx b/src/components/medications/medication-categories-sheet.tsx index 4e438ca63..17c53309f 100644 --- a/src/components/medications/medication-categories-sheet.tsx +++ b/src/components/medications/medication-categories-sheet.tsx @@ -20,7 +20,6 @@ import { AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; -import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { QueryErrorRow } from "@/components/ui/query-error-row"; @@ -134,19 +133,23 @@ function CategoryRow({ className="text-muted-foreground size-4 shrink-0" aria-hidden="true" /> - - {category.label} - - {!category.isActive && ( - - {t("medications.category.custom.hidden")} - - )} - - {t("medications.category.custom.count", { - count: String(category.medicationCount), - })} - + {/* Label on its own line with the count and the hidden state under + it, the course list's row anatomy: three 44 px actions leave a + 390 px row too little width to share with a meta column. */} +
+

+ {category.label} +

+

+ {category.isActive + ? t("medications.category.custom.count", { + count: String(category.medicationCount), + }) + : `${t("medications.category.custom.count", { + count: String(category.medicationCount), + })}, ${t("medications.category.custom.hidden")}`} +

+