gsadmin/temetro
1
0
Fork 0
mirror of https://github.com/temetro/temetro.git synced 2026-07-26 11:58:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove scroll-snap so the first card's left padding isn't clipped

Browse Source 
scroll-snap-align:start snapped the first card flush to the scroll-port
start, hiding the row's left padding and making the card look cut off on
the left. Drop snap-x/snap-start; the p-2 breathing room now shows on
both ends.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-06-01 20:00:19 +03:00
parent 6d542f90a7
commit eeae642751
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/chat/patient-cards.tsx
+4 -4
View File
@@ -57,7 +57,7 @@ const sexLabel: Record<Patient["sex"], string> = { F: "Female", M: "Male" };
// Fixed width so the cards sit in a horizontal scroll row instead of squashing,
// plus a subtle clickable affordance (they open a detail dialog).
const rowCard =
"w-80 shrink-0 cursor-pointer snap-start text-left outline-none transition hover:ring-foreground/20 focus-visible:ring-2 focus-visible:ring-ring";
"w-80 shrink-0 cursor-pointer text-left outline-none transition hover:ring-foreground/20 focus-visible:ring-2 focus-visible:ring-ring";
function SectionLabel({ children }: { children: ReactNode }) {
return (
@@ -480,7 +480,7 @@ function VisitsCard({ patient }: { patient: Patient }) {
function LoadingCards() {
return (
<>
<Card className="w-80 shrink-0 snap-start" size="sm">
<Card className="w-80 shrink-0" size="sm">
<CardHeader>
<div className="flex items-center gap-3">
<Skeleton className="size-10 rounded-full" />
@@ -497,7 +497,7 @@ function LoadingCards() {
</CardContent>
</Card>
{[0, 1, 2, 3, 4, 5].map((card) => (
<Card className="w-80 shrink-0 snap-start" key={card} size="sm">
<Card className="w-80 shrink-0" key={card} size="sm">
<CardHeader>
<Skeleton className="h-4 w-28" />
</CardHeader>
@@ -527,7 +527,7 @@ export function PatientResult({ status, fileNumber, patient }: PatientResultProp
}
return (
<div className="no-scrollbar flex w-full snap-x items-stretch gap-4 overflow-x-auto p-2">
<div className="no-scrollbar flex w-full items-stretch gap-4 overflow-x-auto p-2">
{status === "loading" || !patient ? (
<LoadingCards />
) : (