fix(mobile): keep Coach composer above the bottom nav, restore full hub labels

Size the full-page Coach surface to clear the mobile BottomNav band plus the
iOS safe area so the docked composer and Stop control never sit under the nav;
desktop full-bleed height is unchanged (the nav is mobile-only).

Stop truncating the More-hub labels: shrink the label type and allow a
two-line clamp so long words (German Benachrichtigungen, and the long es/fr/it
labels) read in full instead of ellipsising.

Raise the lab reading-history edit/delete controls to 44px on touch
(compact on desktop), and drop the lab-detail Add button to icon-only on the
narrowest phones.
This commit is contained in:
Marc-André Bombeck committed 2026-06-20 17:15:35 +02:00
1 parent 1706b67dcf
commit 8ef61b02fe
4 files changed
+31 -14

No files matched your search

+7 -2
View File
@@ -165,10 +165,15 @@ export function LabBiomarkerDetail({ biomarkerId }: { biomarkerId: string }) {
/>
<Button
onClick={() => setAddOpen(true)}
className="min-h-11 shrink-0 sm:min-h-9"
// v1.18.10 (W10) — on the narrowest phones the h1 + Edit + Delete +
// text "Add" button crowd the row and truncate the title hard.
// Drop the Add button to icon-only under `sm` (label kept for
// screen readers via `aria-label`); the full text returns at `sm+`.
className="min-h-11 min-w-11 shrink-0 sm:min-h-9 sm:min-w-0"
aria-label={t("labs.addResult")}
>
<Plus className="h-4 w-4" />
{t("labs.addResult")}
<span className="hidden sm:inline">{t("labs.addResult")}</span>
</Button>
</div>
</div>
+4 -2
View File
@@ -228,7 +228,9 @@ export function LabHistoryList({ readings }: { readings: LabResultDto[] }) {
<Button
size="icon"
variant="ghost"
className="size-9"
// v1.18.10 (W10) — 44px touch target on mobile (WCAG 2.5.5),
// compact 36px on desktop. The primary edit control for a row.
className="size-11 sm:size-9"
onClick={() => void openEdit(r)}
aria-label={t("labs.editReading")}
>
@@ -239,7 +241,7 @@ export function LabHistoryList({ readings }: { readings: LabResultDto[] }) {
title={t("labs.deleteConfirmTitle")}
description={t("labs.deleteConfirmDescription")}
confirmLabel={t("labs.deleteReading")}
className="size-9"
className="size-11 sm:size-9"
iconClassName="h-4 w-4"
/>
</div>