feat: improve medication detail modal layout and display (#258)

Widen detail modal on desktop (711px, up from 500px) with max-width
override to beat modals-base.css specificity. Limit fullscreen mode
to actual phones (<=500px) instead of all screens <=900px. Move intake
schedule section before prescription details. Show per-intake takenBy
person and bell icon with proper warning color. Right-align time in
schedule rows. Move notes icon after label text. Replace emoji bell
icons with Lucide Bell component in SchedulePage and MobileEditModal.
Add common.on/common.off i18n keys.

Closes #254
This commit is contained in:
Daniel Volz
2026-02-21 18:00:23 +01:00
committed by GitHub
parent 943148fb49
commit 976d7356ec
5 changed files with 88 additions and 56 deletions
+3 -2
View File
@@ -1,3 +1,4 @@
import { Bell } from "lucide-react";
import { useTranslation } from "react-i18next";
import { MedicationAvatar } from "../components";
import { useAuth } from "../components/Auth";
@@ -204,7 +205,7 @@ export function SchedulePage() {
className="reminder-icon info-tooltip"
data-tooltip={t("tooltips.intakeReminders")}
>
🔔
<Bell size={14} aria-hidden="true" />
</span>
)}{" "}
<div className="dose-checks">
@@ -365,7 +366,7 @@ export function SchedulePage() {
className="reminder-icon info-tooltip"
data-tooltip={t("tooltips.intakeReminders")}
>
🔔
<Bell size={14} aria-hidden="true" />
</span>
)}
<div className="dose-checks">