feat(ui): enhance medication detail modal layout and improve scrolling behavior

frontend/src/App.tsx

@@ -2095,22 +2095,21 @@ function AppContent() {
 					<div className="modal-content med-detail-modal" onClick={(e) => e.stopPropagation()}>
 						<button className="modal-close" onClick={() => setSelectedMed(null)}>×</button>
 						
-						<div className="med-detail-header">
-							<div 
-								className={`med-detail-avatar-wrapper ${selectedMed.imageUrl ? 'clickable' : ''}`}
-								onClick={() => selectedMed.imageUrl && setShowImageLightbox(true)}
-							>
-								<MedicationAvatar name={selectedMed.name} imageUrl={selectedMed.imageUrl} size="lg" />
-								{selectedMed.imageUrl && <span className="expand-icon">🔍</span>}
-							</div>
-							<div className="med-detail-titles">
-								<h2>{selectedMed.name}</h2>
-								{selectedMed.genericName && <span className="med-generic-name">{selectedMed.genericName}</span>}
-								{selectedMed.takenBy && <span className="med-taken-by">{t('modal.for')} {selectedMed.takenBy}</span>}
-							</div>
-						</div>
-
 						<div className="med-detail-body">
+							<div className="med-detail-header">
+								<div 
+									className={`med-detail-avatar-wrapper ${selectedMed.imageUrl ? 'clickable' : ''}`}
+									onClick={() => selectedMed.imageUrl && setShowImageLightbox(true)}
+								>
+									<MedicationAvatar name={selectedMed.name} imageUrl={selectedMed.imageUrl} size="lg" />
+									{selectedMed.imageUrl && <span className="expand-icon">🔍</span>}
+								</div>
+								<div className="med-detail-titles">
+									<h2>{selectedMed.name}</h2>
+									{selectedMed.genericName && <span className="med-generic-name">{selectedMed.genericName}</span>}
+									{selectedMed.takenBy && <span className="med-taken-by">{t('modal.for')} {selectedMed.takenBy}</span>}
+								</div>
+							</div>
 							<div className="med-detail-section">
 								<h3>{t('modal.stockInfo')}</h3>
 								{(() => {

frontend/src/styles.css

@@ -1930,7 +1930,7 @@ textarea {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.75rem;
 }
 
 /* Image upload section */
@@ -2067,6 +2067,14 @@ textarea {
 /* Medication Detail Modal */
 .med-detail-modal {
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+}
+
+.med-detail-modal .med-detail-body {
+  flex: 1;
+  overflow-y: auto;
 }
 
 .med-detail-header {
@@ -2074,7 +2082,8 @@ textarea {
   flex-direction: column;
   align-items: center;
   gap: 1rem;
-  padding: 2rem 2rem 1.5rem;
+  padding: 2rem 2rem 2rem;
+  margin-bottom: 0.5rem;
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
   color: white;
   border-radius: 12px 12px 0 0;
@@ -2348,6 +2357,7 @@ textarea {
   border-top: 1px solid var(--border-primary);
   background: var(--bg-primary);
   border-radius: 0 0 12px 12px;
+  flex-shrink: 0;
 }
 
 .med-detail-footer .footer-actions {