feat: stack related date fields and clarify share stock labels (#422)

* feat: stack related date fields and clarify share stock labels

* test: cover stacked date pairs and share labels

frontend/src/pages/DashboardPage.tsx

@@ -677,8 +677,10 @@ export function DashboardPage() {
 									<span>{t("table.dailyConsumption")}</span>
 									<span>{t("table.stockDetails")}</span>
 									<span>{t("table.daysLeft")}</span>
-									<span>{t("table.runsOut")}</span>
-									<span>{t("table.expiry")}</span>
+									<span className="date-pair-stack-header">
+										<span className="date-pair-label">{t("table.runsOut")}</span>
+										<span className="date-pair-label">{t("table.expiry")}</span>
+									</span>
 									<span>{t("table.status")}</span>
 								</div>
 								{coverage.all.map((row) => {
@@ -806,15 +808,23 @@ export function DashboardPage() {
 											<span data-label={t("table.daysLeft")} className={textClass}>
 												{formatNumber(row.daysLeft)}
 											</span>
-											<span data-label={t("table.runsOut")}>{row.depletionDate ?? "-"}</span>
-											<span data-label={t("table.expiry")} className={expiryClass}>
-												{med?.expiryDate
-													? new Date(med.expiryDate).toLocaleDateString(getSystemLocale(i18n.language), {
-															day: "2-digit",
-															month: "short",
-															year: "2-digit",
-														})
-													: "-"}
+											<span className="date-pair-stack">
+												<span className="date-pair-entry">
+													<span className="date-pair-label">{t("table.runsOut")}</span>
+													<span className="date-pair-value">{row.depletionDate ?? "-"}</span>
+												</span>
+												<span className="date-pair-entry">
+													<span className="date-pair-label">{t("table.expiry")}</span>
+													<span className={`date-pair-value ${expiryClass}`}>
+														{med?.expiryDate
+															? new Date(med.expiryDate).toLocaleDateString(getSystemLocale(i18n.language), {
+																	day: "2-digit",
+																	month: "short",
+																	year: "2-digit",
+																})
+															: "-"}
+													</span>
+												</span>
 											</span>
 											<span data-label={t("table.status")} className={status ? `status-chip ${status.className}` : ""}>
 												{status ? t(status.label) : "-"}

frontend/src/pages/MedicationsPage.tsx

@@ -1247,17 +1247,27 @@ export function MedicationsPage() {
 											<span className="field-error">{fieldErrors.genericName}</span>
 										)}
 									</label>
-									<label>
-										{t("form.medicationStartDate")}
-										<DateInput
-											value={form.medicationStartDate}
-											onChange={(e) => handleValueChange("medicationStartDate", e.target.value)}
-											placeholder={t("common.optional")}
-										/>
-										{!readOnlyView && dateConsistencyError && (
-											<span className="field-error">{dateConsistencyError}</span>
-										)}
-									</label>
+									<div className="full date-pair-group">
+										<label className="date-pair-field">
+											{t("form.medicationStartDate")}
+											<DateInput
+												value={form.medicationStartDate}
+												onChange={(e) => handleValueChange("medicationStartDate", e.target.value)}
+												placeholder={t("common.optional")}
+											/>
+											{!readOnlyView && dateConsistencyError && (
+												<span className="field-error">{dateConsistencyError}</span>
+											)}
+										</label>
+										<label className="date-pair-field">
+											{t("form.medicationEndDate")}
+											<DateInput
+												value={form.medicationEndDate}
+												onChange={(e) => handleValueChange("medicationEndDate", e.target.value)}
+												placeholder={t("common.optional")}
+											/>
+										</label>
+									</div>
 									<label>
 										{t("form.packageType")}
 										<select
@@ -1272,14 +1282,6 @@ export function MedicationsPage() {
 											))}
 										</select>
 									</label>
-									<label>
-										{t("form.medicationEndDate")}
-										<DateInput
-											value={form.medicationEndDate}
-											onChange={(e) => handleValueChange("medicationEndDate", e.target.value)}
-											placeholder={t("common.optional")}
-										/>
-									</label>
 									{allowsPillFormSelection(form.packageType) && (
 										<label>
 											{t("form.pillForm")}

frontend/src/pages/SharedOverviewPage.tsx

@@ -244,8 +244,12 @@ export function SharedOverviewPage() {
 										<th>{t("sharedOverview.columns.package")}</th>
 										<th>{t("sharedOverview.columns.stock")}</th>
 										<th>{t("sharedOverview.columns.daysLeft")}</th>
-										<th>{t("sharedOverview.columns.nextIntake")}</th>
-										<th>{t("sharedOverview.columns.depletion")}</th>
+										<th>
+											<div className="date-pair-stack-header">
+												<span className="date-pair-label">{t("sharedOverview.columns.nextIntake")}</span>
+												<span className="date-pair-label">{t("sharedOverview.columns.depletion")}</span>
+											</div>
+										</th>
 										<th>{t("sharedOverview.columns.priority")}</th>
 									</tr>
 								</thead>
@@ -276,8 +280,18 @@ export function SharedOverviewPage() {
 															})}
 												</td>
 												<td>{medication.daysLeft === null ? "-" : medication.daysLeft}</td>
-												<td>{formatDate(medication.nextIntakeDate, locale)}</td>
-												<td>{formatDate(medication.depletionDate, locale)}</td>
+												<td>
+													<div className="date-pair-stack">
+														<div className="date-pair-entry">
+															<span className="date-pair-label">{t("sharedOverview.columns.nextIntake")}</span>
+															<span className="date-pair-value">{formatDate(medication.nextIntakeDate, locale)}</span>
+														</div>
+														<div className="date-pair-entry">
+															<span className="date-pair-label">{t("sharedOverview.columns.depletion")}</span>
+															<span className="date-pair-value">{formatDate(medication.depletionDate, locale)}</span>
+														</div>
+													</div>
+												</td>
 												<td>
 													{medication.priority === null ? (
 														"-"