From 3b4d031e1e4bf1fb8154ee3c13636092aadfb4ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 8 Oct 2026 19:34:16 +0200
Subject: [PATCH] Lay the medication tabs out three-up on a phone

Wrapped, the last two tabs stretched across the second row.
---
 .../medications/detail/medication-detail-tabs.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/medications/detail/medication-detail-tabs.tsx b/src/components/medications/detail/medication-detail-tabs.tsx
index 0e55a2348..48afd80b7 100644
--- a/src/components/medications/detail/medication-detail-tabs.tsx
+++ b/src/components/medications/detail/medication-detail-tabs.tsx
@@ -525,9 +525,9 @@ export function MedicationDetailTabs({
         data-slot="medication-detail-tabs"
       >
         <TabsList
-          // Six tabs do not fit a phone in one row; they wrap into two
-          // there instead of scrolling a label off the edge.
-          className="w-full justify-start max-sm:h-auto! max-sm:flex-wrap"
+          // Six tabs do not fit a phone in one row; they sit in a three-up
+          // grid there instead of scrolling a label off the edge.
+          className="w-full justify-start max-sm:grid! max-sm:h-auto! max-sm:grid-cols-3"
           aria-label={t("medications.detail.shell.tablistLabel")}
         >
           {availableTabs.map((slug) => (