From fad92a0b2430ee13beb79a60f7954a387a1cd36a Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sun, 28 Dec 2025 13:14:47 +0100
Subject: [PATCH] feat(ui): enhance email status bar layout with improved
 styling and responsiveness

---
 frontend/src/App.tsx    | 33 ++++++++++++++++++++++-----------
 frontend/src/styles.css | 20 +++++++++++++++++++-
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6a00b81..e5515e9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1025,7 +1025,8 @@ function AppContent() {
 							<section className="email-status-bar">
 								<span className="email-status-icon">{settings.emailEnabled && settings.shoutrrrEnabled ? "🔔" : settings.emailEnabled ? "📧" : "🔔"}</span>
 								<span className="email-status-text">
-									{t('dashboard.reminders.active')} — {getReminderStatusText(settings.reminderDaysBefore, settings.lowStockDays, coverage.low, coverage.all, settings.lastAutoEmailSent, settings.lastNotificationType, settings.lastNotificationChannel, t, i18n.language)}
+									<span className="email-status-line">{t('dashboard.reminders.active')}</span>
+									{getReminderStatusText(settings.reminderDaysBefore, settings.lowStockDays, coverage.low, coverage.all, settings.lastAutoEmailSent, settings.lastNotificationType, settings.lastNotificationChannel, t, i18n.language)}
 								</span>
 								{settings.emailEnabled && settings.notificationEmail && <span className="email-status-recipient">→ {settings.notificationEmail}</span>}
 							</section>
@@ -2838,12 +2839,17 @@ function getReminderStatusText(
 		if (lastSent) {
 			return (
 				<>
-					<strong className="warning-text">⚠ {t('dashboard.reminders.needReorder', { count: medsNeedingReminder.length })}</strong>
-					{" · "}{t('dashboard.reminders.lastReminder')}: {formatLastInfo(lastSent)}
+					<span className="email-status-line"><strong className="warning-text">⚠ {t('dashboard.reminders.needReorder', { count: medsNeedingReminder.length })}</strong></span>
+					<span className="email-status-line">{t('dashboard.reminders.lastReminder')}: {formatLastInfo(lastSent)}</span>
 				</>
 			);
 		}
-		return <strong className="warning-text">⚠ {t('dashboard.reminders.needReorder', { count: medsNeedingReminder.length })} — {t('dashboard.reminders.waitingFirstCheck')}</strong>;
+		return (
+			<>
+				<span className="email-status-line"><strong className="warning-text">⚠ {t('dashboard.reminders.needReorder', { count: medsNeedingReminder.length })}</strong></span>
+				<span className="email-status-line">{t('dashboard.reminders.waitingFirstCheck')}</span>
+			</>
+		);
 	}
 
 	// Check if there are low stock medications (not yet needing reminder but running low)
@@ -2857,8 +2863,8 @@ function getReminderStatusText(
 		const daysUntilReminder = (nextMed.daysLeft ?? 0) - reminderDaysBefore;
 		return (
 			<>
-				<span className="warning-text">{t('dashboard.reminders.lowWarning', { count: lowStockNotYetCritical.length })}</span>
-				{" · "}{t('dashboard.reminders.nextIn')}: <strong>{nextMed.name}</strong> {t('dashboard.reminders.inDays', { days: daysUntilReminder })}
+				<span className="email-status-line"><span className="warning-text">{t('dashboard.reminders.lowWarning', { count: lowStockNotYetCritical.length })}</span></span>
+				<span className="email-status-line">{t('dashboard.reminders.nextIn')}: <strong>{nextMed.name}</strong> {t('dashboard.reminders.inDays', { days: daysUntilReminder })}</span>
 			</>
 		);
 	}
@@ -2874,8 +2880,8 @@ function getReminderStatusText(
 		if (daysUntilReminder > 0) {
 			return (
 				<>
-					<span className="success-text">✓ {t('dashboard.reminders.allOk')}</span>
-					{" · "}{t('dashboard.reminders.nextIn')}: <strong>{nextMed.name}</strong> {t('dashboard.reminders.inDays', { days: daysUntilReminder })}
+					<span className="email-status-line"><span className="success-text">✓ {t('dashboard.reminders.allOk')}</span></span>
+					<span className="email-status-line">{t('dashboard.reminders.nextIn')}: <strong>{nextMed.name}</strong> {t('dashboard.reminders.inDays', { days: daysUntilReminder })}</span>
 				</>
 			);
 		}
@@ -2885,12 +2891,17 @@ function getReminderStatusText(
 	if (lastSent) {
 		return (
 			<>
-				<span className="success-text">✓ {t('dashboard.reminders.allStockOk')}</span>
-				{" · "}{t('dashboard.reminders.lastReminder')}: {formatLastInfo(lastSent)}
+				<span className="email-status-line"><span className="success-text">✓ {t('dashboard.reminders.allStockOk')}</span></span>
+				<span className="email-status-line">{t('dashboard.reminders.lastReminder')}: {formatLastInfo(lastSent)}</span>
 			</>
 		);
 	}
-	return <span className="success-text">✓ {t('dashboard.reminders.allStockOk')} — {t('dashboard.reminders.noRemindersNeeded')}</span>;
+	return (
+		<>
+			<span className="email-status-line"><span className="success-text">✓ {t('dashboard.reminders.allStockOk')}</span></span>
+			<span className="email-status-line">{t('dashboard.reminders.noRemindersNeeded')}</span>
+		</>
+	);
 }
 
 function getNextReminderForMed(med: Coverage, reminderDaysBefore: number, locale: string): string {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 2664683..e77fe1a 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -158,6 +158,14 @@ body.modal-open {
 .email-status-text {
   color: var(--text-secondary);
   flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.5rem;
+}
+
+.email-status-line {
+  white-space: normal;
+  word-break: break-word;
 }
 
 .email-status-text strong {
@@ -174,7 +182,17 @@ body.modal-open {
 
 @media (max-width: 600px) {
   .email-status-bar {
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  .email-status-text {
+    flex-direction: column;
+    gap: 0.35rem;
+    width: 100%;
+  }
+  .email-status-line {
+    display: block;
   }
   .email-status-recipient {
     width: 100%;