mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-12 06:06:10 +00:00
chore(dashboard): apply the tap-target floor across the dashboard tile and onboarding chrome
Lift the GLP-1 tile range strip + tab pills, the getting-started checklist dismiss buttons, and the settings reorder + source-ladder arrow buttons so every interactive element clears the 44 px WCAG 2.5.5 floor. - `glp1-tile.tsx`: range-strip radio buttons gain `inline-flex min-h-11 items-center justify-center px-3` so each preset sits at 44 px; the tab pills (level / weight) lift the same way. - `getting-started-checklist.tsx`: dismiss-all CTA drops `size="sm"` so it sits at the default 40 px primitive height; per-row dismiss `X` button wraps in `inline-flex h-11 w-11`. - `dashboard-layout-section.tsx`: reorder up + down arrows `h-5 w-5` → `size-11`; column-header spacer widens to `w-11` to keep the layout grid aligned. - `sources-section.tsx`: metric source ladder + device-type ladder up/down arrows stack vertically on `<sm` so each button keeps the `h-11 w-11` floor without crowding the row; sit side-by-side again from `sm:` up to preserve the desktop layout.
This commit is contained in:
Marc-André Bombeck committed
1 parent
1ca7022538
commit
17aed374eb
4 files changed
+69
-59
No files matched your search
@@ -253,7 +253,7 @@ export function DashboardLayoutSection({ id }: { id: string }) {
|
||||
of the two surfaces (per feedback_dashboard_top_tiles
|
||||
_selectable.md). */}
|
||||
<div className="text-muted-foreground flex items-center gap-3 px-3 pb-1 text-[10px] font-medium tracking-wide uppercase">
|
||||
<span className="w-5" aria-hidden="true" />
|
||||
<span className="w-11" aria-hidden="true" />
|
||||
<span className="flex-1" />
|
||||
<span className="w-12 text-center">
|
||||
{t("dashboard.layoutTileColumn")}
|
||||
@@ -280,25 +280,25 @@ export function DashboardLayoutSection({ id }: { id: string }) {
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5"
|
||||
className="size-11"
|
||||
onClick={() => move(widget.id, -1)}
|
||||
disabled={index === 0 || saveMutation.isPending}
|
||||
aria-label={t("dashboard.moveUp")}
|
||||
>
|
||||
<ArrowUp className="h-3 w-3" />
|
||||
<ArrowUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-5 w-5"
|
||||
className="size-11"
|
||||
onClick={() => move(widget.id, 1)}
|
||||
disabled={
|
||||
index === arr.length - 1 || saveMutation.isPending
|
||||
}
|
||||
aria-label={t("dashboard.moveDown")}
|
||||
>
|
||||
<ArrowDown className="h-3 w-3" />
|
||||
<ArrowDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<span className="flex-1 text-sm">{t(labelKey)}</span>
|
||||
|
||||
@@ -344,30 +344,37 @@ export function SourcesSection() {
|
||||
<span className="flex-1 text-sm">
|
||||
{t(SOURCE_LABEL_KEYS[source] ?? source)}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() => moveSource(metric, index, -1)}
|
||||
disabled={index === 0 || saveMutation.isPending}
|
||||
aria-label={t("settings.sections.sources.moveUp")}
|
||||
>
|
||||
<ArrowUp className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() => moveSource(metric, index, 1)}
|
||||
disabled={
|
||||
index === list.length - 1 || saveMutation.isPending
|
||||
}
|
||||
aria-label={t("settings.sections.sources.moveDown")}
|
||||
>
|
||||
<ArrowDown className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
{/* v1.4.27 R3d MB2 — stack up/down vertically on
|
||||
narrow viewports so each button keeps the
|
||||
44 px floor without crowding the row. From
|
||||
`sm:` up the two buttons sit side-by-side
|
||||
again to preserve the desktop layout. */}
|
||||
<div className="flex flex-col gap-1 sm:flex-row sm:gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() => moveSource(metric, index, -1)}
|
||||
disabled={index === 0 || saveMutation.isPending}
|
||||
aria-label={t("settings.sections.sources.moveUp")}
|
||||
>
|
||||
<ArrowUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() => moveSource(metric, index, 1)}
|
||||
disabled={
|
||||
index === list.length - 1 || saveMutation.isPending
|
||||
}
|
||||
aria-label={t("settings.sections.sources.moveDown")}
|
||||
>
|
||||
<ArrowDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -502,32 +509,36 @@ export function SourcesSection() {
|
||||
<span className="flex-1 text-sm">
|
||||
{t(DEVICE_TYPE_LABEL_KEYS[deviceType])}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() =>
|
||||
moveDeviceType(null, index, -1)
|
||||
}
|
||||
disabled={index === 0 || saveMutation.isPending}
|
||||
aria-label={t("settings.sections.sources.moveUp")}
|
||||
>
|
||||
<ArrowUp className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() => moveDeviceType(null, index, 1)}
|
||||
disabled={
|
||||
index === list.length - 1 || saveMutation.isPending
|
||||
}
|
||||
aria-label={t("settings.sections.sources.moveDown")}
|
||||
>
|
||||
<ArrowDown className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
{/* v1.4.27 R3d MB2 — same stacked-on-mobile shape
|
||||
as the metric source rows above. */}
|
||||
<div className="flex flex-col gap-1 sm:flex-row sm:gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() =>
|
||||
moveDeviceType(null, index, -1)
|
||||
}
|
||||
disabled={index === 0 || saveMutation.isPending}
|
||||
aria-label={t("settings.sections.sources.moveUp")}
|
||||
>
|
||||
<ArrowUp className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11"
|
||||
onClick={() => moveDeviceType(null, index, 1)}
|
||||
disabled={
|
||||
index === list.length - 1 || saveMutation.isPending
|
||||
}
|
||||
aria-label={t("settings.sections.sources.moveDown")}
|
||||
>
|
||||
<ArrowDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Reference in new issue
Block a user