From 4d7abdd12bd835ebe060fd12ddd8142f6dbf0fa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 3 Oct 2026 22:47:09 +0200
Subject: [PATCH] Give a category its own line in the manage sheet

At phone width the three actions left the label a few characters; the
count and the hidden state now sit under it, the course list's row
anatomy.
---
 .../medication-categories-sheet.tsx           | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

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"
       />
-      <span className="min-w-0 flex-1 truncate text-sm" title={category.label}>
-        {category.label}
-      </span>
-      {!category.isActive && (
-        <Badge variant="secondary">
-          {t("medications.category.custom.hidden")}
-        </Badge>
-      )}
-      <span className="text-muted-foreground shrink-0 text-xs tabular-nums">
-        {t("medications.category.custom.count", {
-          count: String(category.medicationCount),
-        })}
-      </span>
+      {/* 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. */}
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm" title={category.label}>
+          {category.label}
+        </p>
+        <p className="text-muted-foreground text-xs tabular-nums">
+          {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")}`}
+        </p>
+      </div>
       <Button
         type="button"
         variant="ghost"