mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-14 06:40:50 +00:00
Size the catalog row skeleton to the row, drop the sparkline focus stop
The catalog's loading rows were 6 px shorter than the loaded ones, so the groups below moved when a probe landed. The decorative score sparklines sit in an aria-hidden wrapper, and Recharts' accessibility layer put a focusable surface inside it.
This commit is contained in:
1 parent
fb3a13925d
commit
105c293544
2 files changed
+12
-3
No files matched your search
@@ -122,8 +122,10 @@ function CatalogRowSkeleton() {
|
||||
data-slot="catalog-row-skeleton"
|
||||
className="flex items-start justify-between gap-3 py-2"
|
||||
>
|
||||
<div className="min-w-0 flex-1 space-y-1.5">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
{/* Sized to the loaded row (a 22 px name-and-badge line over a 16 px
|
||||
source line), so the groups below do not move when it lands. */}
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<Skeleton className="h-5.5 w-32" />
|
||||
<Skeleton className="h-3 w-48" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-20 shrink-0" />
|
||||
|
||||
Reference in new issue
Block a user