diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4397ad9..0a44c20 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -301,6 +301,12 @@ function AppContent() { closeAllTooltips(); // Toggle this one target.classList.add("tooltip-active"); + // Position tooltip above the icon on mobile + if (window.innerWidth <= 640) { + const rect = target.getBoundingClientRect(); + // Place tooltip bottom edge just above the icon + target.style.setProperty("--tooltip-bottom", `${window.innerHeight - rect.top + 8}px`); + } } else { closeAllTooltips(); } diff --git a/frontend/src/components/MedDetailModal.tsx b/frontend/src/components/MedDetailModal.tsx index a745c0d..1fa5c82 100644 --- a/frontend/src/components/MedDetailModal.tsx +++ b/frontend/src/components/MedDetailModal.tsx @@ -356,8 +356,7 @@ export function MedDetailModal({ ` (${totalUsage * selectedMed.pillWeightMg} ${selectedMed.doseUnit ?? "mg"})`} - {t("form.blisters.every")} {blister.every}{" "} - {blister.every !== 1 ? t("common.days") : t("common.day")} + {blister.every === 1 ? t("common.daily") : t("common.everyNDays", { count: blister.every })} {t("modal.at")}{" "} diff --git a/frontend/src/components/UserFilterModal.tsx b/frontend/src/components/UserFilterModal.tsx index b63732b..e82a9cc 100644 --- a/frontend/src/components/UserFilterModal.tsx +++ b/frontend/src/components/UserFilterModal.tsx @@ -92,8 +92,8 @@ export function UserFilterModal({ {intake.usage} {intake.usage !== 1 ? t("common.pills") : t("common.pill")} {med.pillWeightMg != null && ` (${intake.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"})`}{" "} - {t("form.blisters.every")} {intake.every}{" "} - {intake.every !== 1 ? t("common.days") : t("common.day")} {t("modal.at")} {timeStr} + {intake.every === 1 ? t("common.daily") : t("common.everyNDays", { count: intake.every })}{" "} + {t("modal.at")} {timeStr} ); })} diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json index dab1505..f467c71 100644 --- a/frontend/src/i18n/de.json +++ b/frontend/src/i18n/de.json @@ -434,6 +434,8 @@ "of": "von", "loose": "lose", "none": "Kein", + "daily": "täglich", + "everyNDays": "alle {{count}} Tage", "day": "Tag", "days": "Tage", "blister": "Blister", diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index e94ebad..86299d4 100644 --- a/frontend/src/i18n/en.json +++ b/frontend/src/i18n/en.json @@ -434,6 +434,8 @@ "of": "of", "loose": "loose", "none": "None", + "daily": "daily", + "everyNDays": "every {{count}} days", "day": "day", "days": "days", "blister": "blister", diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx index 5555a72..762d180 100644 --- a/frontend/src/pages/DashboardPage.tsx +++ b/frontend/src/pages/DashboardPage.tsx @@ -608,7 +608,17 @@ export function DashboardPage() { - {row.name} + + {row.name} + {med?.notes && ( + <> + {" "} + + 📝 + + + )} + {med?.takenBy && med.takenBy.length > 0 && ( {med.takenBy.map((person) => ( @@ -628,13 +638,6 @@ export function DashboardPage() { )} - {med?.notes && ( - - - 📝 - - - )} {med?.packageType === "bottle" diff --git a/frontend/src/pages/MedicationsPage.tsx b/frontend/src/pages/MedicationsPage.tsx index a3c12cd..6273994 100644 --- a/frontend/src/pages/MedicationsPage.tsx +++ b/frontend/src/pages/MedicationsPage.tsx @@ -697,9 +697,9 @@ export function MedicationsPage() {
{(med.intakes ?? med.blisters).map((s, idx) => (
- {s.usage} {s.usage === 1 ? t("common.pill") : t("common.pills")} · {t("form.blisters.every")}{" "} - {s.every} {s.every === 1 ? t("common.day") : t("common.days")} · {t("form.blisters.from")}{" "} - {formatDateTime(s.start)} + {s.usage} {s.usage === 1 ? t("common.pill") : t("common.pills")} ·{" "} + {s.every === 1 ? t("common.daily") : t("common.everyNDays", { count: s.every })} ·{" "} + {t("form.blisters.from")} {formatDateTime(s.start)} {"takenBy" in s && s.takenBy && · {s.takenBy}} {"intakeRemindersEnabled" in s && s.intakeRemindersEnabled && ( diff --git a/frontend/src/pages/PlannerPage.tsx b/frontend/src/pages/PlannerPage.tsx index 1ce61c9..ddaac3b 100644 --- a/frontend/src/pages/PlannerPage.tsx +++ b/frontend/src/pages/PlannerPage.tsx @@ -168,17 +168,19 @@ export function PlannerPage() { {t("planner.until")} setRange({ ...range, end: e.target.value })} /> - diff --git a/frontend/src/styles.css b/frontend/src/styles.css index c05c38d..0c67076 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -2503,8 +2503,14 @@ button.has-validation-error { text-transform: uppercase; letter-spacing: 0.04em; } -.planner label.planner-checkbox { +.planner .planner-checkbox-row { grid-column: 1 / -1; + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; +} +.planner label.planner-checkbox { display: flex; flex-direction: row; align-items: center; @@ -2911,16 +2917,20 @@ button.has-validation-error { opacity: 1; visibility: visible; position: fixed; - top: 50%; - left: 50%; - bottom: auto; - right: auto; - transform: translate(-50%, -50%); - max-width: calc(100vw - 32px); - width: max-content; + top: auto; + bottom: var(--tooltip-bottom, 50%); + left: 16px !important; + right: 16px !important; + transform: none !important; + width: auto !important; + max-width: none !important; z-index: 9999; } + .info-tooltip.tooltip-active::before { + display: none; + } + .info-tooltip::before { display: none; } @@ -3456,23 +3466,22 @@ button.has-validation-error { font-family: "SF Mono", "Fira Code", monospace; } -/* Input with tooltip inside */ +/* Input with tooltip beside */ .input-with-tooltip { - position: relative; display: flex; align-items: center; + gap: 0.5rem; } .input-with-tooltip input { - width: 100%; - padding-right: 2.5rem; + flex: 1; + min-width: 0; } .input-with-tooltip .info-tooltip { - position: absolute; - right: 0.75rem; - top: 50%; - transform: translateY(-50%); + flex-shrink: 0; + cursor: pointer; + padding: 0.25rem; } /* SMTP Info */ @@ -3671,7 +3680,7 @@ button.has-validation-error { .cell-with-avatar .med-name-line { display: flex; - align-items: center; + align-items: flex-start; gap: 0.5rem; } @@ -4015,14 +4024,14 @@ button.has-validation-error { .user-med-info { flex: 1; - min-width: 120px; + min-width: 150px; } .user-med-name { display: block; font-weight: 600; color: var(--text-primary); - word-break: break-word; + white-space: nowrap; } .user-med-generic { @@ -4199,7 +4208,8 @@ button.has-validation-error { .med-schedule-item { display: flex; align-items: center; - gap: 0.75rem; + justify-content: flex-start; + gap: 1rem; background: var(--bg-secondary); padding: 0.75rem 1rem; border-radius: 8px; @@ -4216,7 +4226,6 @@ button.has-validation-error { } .med-schedule-time { - margin-left: auto; font-weight: 500; } @@ -6078,6 +6087,10 @@ a.about-version-link:hover { width: 100%; } +.mobile-edit-form .date-input-display { + font-size: 16px !important; +} + .mobile-edit-form .blister-row { display: grid; grid-template-columns: 1fr 1fr;