feat(ui): update medication icons alignment and styling for improved mobile display

frontend/src/App.tsx

@@ -1013,7 +1013,6 @@ function AppContent() {
 							<article className="card">
 								<div className="card-head">
 									<h2>{t('dashboard.reorder.title')}</h2>
-									<span className="pill neutral">{t('dashboard.reorder.badge')}</span>
 								</div>
 								{(() => {
 									if (meds.length === 0) {
@@ -1105,7 +1104,6 @@ function AppContent() {
 							<article className="card">
 								<div className="card-head">
 									<h2>{t('dashboard.overview.title')}</h2>
-									<span className="pill neutral">{t('dashboard.overview.badge')}</span>
 								</div>
 								<div className="table table-7">
 									<div className="table-head">
@@ -1374,7 +1372,6 @@ function AppContent() {
 						<article className="card meds">
 							<div className="card-head">
 								<h2>{t('medications.list.title')}</h2>
-								<span className="pill neutral">{loading ? t('common.loading') : t('medications.list.entries', { count: meds.length })}</span>
 							</div>
 							<div className="med-list">
 								{meds.map((med) => (
@@ -1413,7 +1410,6 @@ function AppContent() {
 						<article className="card form desktop-only">
 							<div className="card-head">
 								<h2>{editingId ? t('form.editEntry') : t('form.newEntry')}</h2>
-								<span className="pill">{t('form.badge')}</span>
 							</div>
 							<form className="form-grid" onSubmit={saveMedication}>
 								<label>
@@ -1578,7 +1574,6 @@ function AppContent() {
 						<article className="card">
 							<div className="card-head">
 								<h2>{t('planner.title')}</h2>
-								<span className="pill neutral">{t('planner.badge')}</span>
 							</div>
 							<form className="planner" onSubmit={runPlanner}>
 								<label>

frontend/src/styles.css

@@ -829,11 +829,13 @@ textarea {
   .table-row .cell-with-avatar .med-avatar {
     flex-shrink: 0;
   }
-  /* Icons on separate line on mobile - aligned left under med name */
+  /* Icons on separate line on mobile - centered under med name */
   .table-row .cell-with-avatar .med-icons {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
+    width: 100%;
   }
   /* Badges and icons wrap to next line if needed but stay together */
   .table-row .taken-by-badge,
@@ -1878,8 +1880,9 @@ textarea {
 /* Table/Timeline cells with avatar */
 .cell-with-avatar {
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .cell-with-avatar .med-name-line {
@@ -1891,13 +1894,8 @@ textarea {
 .cell-with-avatar .med-icons {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
   font-size: 1rem;
-  width: 100%;
-  border: none !important;
-  border-top: none !important;
-  border-bottom: none !important;
 }
 
 .cell-with-avatar .med-icons span {
@@ -1987,7 +1985,6 @@ textarea {
   justify-content: center;
   z-index: 1000;
   padding: 2rem 1rem;
-  overflow-y: auto;
   animation: fadeIn 0.2s ease;
 }
 
@@ -3109,8 +3106,6 @@ h3 .reminder-icon.info-tooltip {
 .share-dialog-modal {
   max-width: 480px;
   padding: 1.5rem;
-  margin-top: 0;
-  align-self: flex-start;
 }
 
 .share-dialog-header {