From 5d3a4c0b13f9a05b64bf00a242c5cb2f062c8abc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 12:43:17 +0200
Subject: [PATCH] style(settings): widen Doctor-Report export card to full-row
 on md+
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Doctor-report is the most user-facing export — give it its own row above
the 4-card 2×2 grid so it reads as the primary action. Mobile keeps the
single-column stack since every card is already full-width there.
---
 src/components/settings/export-section.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/export-section.tsx b/src/components/settings/export-section.tsx
index fe3259b00..a5908f75d 100644
--- a/src/components/settings/export-section.tsx
+++ b/src/components/settings/export-section.tsx
@@ -105,6 +105,8 @@ interface ExportCardShellProps {
   children?: React.ReactNode;
   /** Footer slot — typically the "Download" button + status text. */
   footer: React.ReactNode;
+  /** Extra grid-position classes applied to the outer card div. */
+  outerClassName?: string;
 }
 
 function ExportCardShell({
@@ -115,11 +117,12 @@ function ExportCardShell({
   format,
   children,
   footer,
+  outerClassName,
 }: ExportCardShellProps) {
   return (
     <div
       data-testid={testId}
-      className="bg-card border-border flex h-full flex-col rounded-xl border p-5"
+      className={`bg-card border-border flex h-full flex-col rounded-xl border p-5${outerClassName ? ` ${outerClassName}` : ""}`}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-center gap-2">
@@ -208,6 +211,7 @@ function DoctorReportCard() {
       title={t("settings.sections.export.cards.doctorReport.title")}
       description={t("settings.sections.export.cards.doctorReport.description")}
       format="PDF"
+      outerClassName="md:col-span-2"
       footer={
         <Button
           data-testid="export-action-doctor-report"