feat(med-detail-footer): enhance layout and styling for footer actions and buttons

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>
 

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;