From d378b081c69ab85631ca0f3b55ade9ad653fd206 Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sat, 27 Dec 2025 22:36:50 +0100
Subject: [PATCH] feat(med-detail-footer): enhance layout and styling for
 footer actions and buttons

---
 frontend/src/App.tsx    | 18 ++++++++++--------
 frontend/src/styles.css | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4ede942..6fdfd1a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2130,17 +2130,19 @@ function AppContent() {
 						</div>
 
 						<div className="med-detail-footer">
-							<button className="ghost" onClick={() => { setSelectedMed(null); setShowImageLightbox(false); }}>
+							<button className="danger" onClick={() => { setSelectedMed(null); setShowImageLightbox(false); }}>
 								{t('common.close')}
 							</button>
-							{selectedMed.blisters.length > 0 && (
-								<button className="ghost" onClick={() => generateICS(selectedMed)} title={t('modal.exportTooltip')}>
-									📅 {t('modal.exportCalendar')}
+							<div className="footer-actions">
+								<button className="ghost" onClick={() => { setSelectedMed(null); setShowImageLightbox(false); navigate("/medications"); startEdit(selectedMed); }}>
+									{t('common.edit')}
 								</button>
-							)}
-							<button className="ghost" onClick={() => { setSelectedMed(null); setShowImageLightbox(false); navigate("/medications"); startEdit(selectedMed); }}>
-								{t('modal.editMedication')}
-							</button>
+								{selectedMed.blisters.length > 0 && (
+									<button className="ghost icon-only" onClick={() => generateICS(selectedMed)} title={t('modal.exportTooltip')}>
+										📅
+									</button>
+								)}
+							</div>
 						</div>
 					</div>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index a6e2fbd..c1aa14a 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2248,12 +2248,23 @@ textarea {
 .med-detail-footer {
   padding: 1rem 2rem 1.5rem;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
   border-top: 1px solid var(--border-primary);
   background: var(--bg-primary);
   border-radius: 0 0 12px 12px;
 }
 
+.med-detail-footer .footer-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.med-detail-footer button.icon-only {
+  padding: 0.5rem 0.75rem;
+  min-width: auto;
+}
+
 /* Clickable avatar wrapper */
 .med-detail-avatar-wrapper {
   position: relative;