mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 05:42:19 +00:00
Marc-André Bombeck
1eb143fad4
Bring interactive elements that fell below the 44px iOS/WCAG touch floor up to min-h-11 on phones (relaxing to the denser sm density on larger screens), and add visible focus rings where they were missing: - TimesOfDayChips remove button + API-token copy buttons gain an inset hit-area so the visual density stays tight while the tap target clears the floor. - Dose-history row-actions menu trigger and the insights suggested- prompt chips raise to min-h-11 sm:min-h-9. - Sortable table headers and the glucose advanced disclosure toggle gain a focus-visible ring and a phone tap floor.
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
|
|
|
|
import { TableHead } from "@/components/ui/table";
|
|
|
|
/**
|
|
* Shared clickable sort header for the data-management tables
|
|
* (measurements + mood). Lifted verbatim from the two copy-pasted
|
|
* `SortableHead` definitions (v1.15.13). Domain specifics — which
|
|
* columns are sortable, their labels — stay in each list; only this
|
|
* chrome moves.
|
|
*/
|
|
export function SortableHead({
|
|
column,
|
|
label,
|
|
currentSort,
|
|
currentDir,
|
|
onSort,
|
|
className,
|
|
}: {
|
|
column: string;
|
|
label: string;
|
|
currentSort: string;
|
|
currentDir: "asc" | "desc";
|
|
onSort: (col: string) => void;
|
|
className?: string;
|
|
}) {
|
|
const isActive = currentSort === column;
|
|
return (
|
|
<TableHead className={className}>
|
|
<button
|
|
type="button"
|
|
onClick={() => onSort(column)}
|
|
className="hover:text-foreground focus-visible:ring-ring/50 inline-flex min-h-11 items-center gap-1 rounded-sm transition-colors focus-visible:ring-2 focus-visible:outline-none sm:min-h-0"
|
|
>
|
|
{label}
|
|
{isActive ? (
|
|
currentDir === "asc" ? (
|
|
<ArrowUp className="h-3.5 w-3.5" />
|
|
) : (
|
|
<ArrowDown className="h-3.5 w-3.5" />
|
|
)
|
|
) : (
|
|
<ArrowUpDown className="h-3.5 w-3.5 opacity-40" />
|
|
)}
|
|
</button>
|
|
</TableHead>
|
|
);
|
|
}
|