responsive layout fixes, version in sidebar, fixed voice card height, hide player title at small widths

This commit is contained in:
Jamie Pine
2026-03-13 10:44:53 -07:00
parent 81f8be1a94
commit 509b0e71cc
8 changed files with 42 additions and 27 deletions
@@ -78,7 +78,7 @@ export function ProfileCard({ profile }: ProfileCardProps) {
<>
<Card
className={cn(
'cursor-pointer hover:shadow-md transition-all flex flex-col',
'cursor-pointer hover:shadow-md transition-all flex flex-col h-[162px]',
isSelected && 'ring-2 ring-primary shadow-md',
)}
onClick={handleSelect}
@@ -41,9 +41,11 @@ export function ProfileList() {
</CardContent>
</Card>
) : (
<div className="grid gap-4 grid-cols-3 auto-rows-auto p-1 pb-[150px]">
<div className="flex gap-4 overflow-x-auto p-1 pb-1 lg:grid lg:grid-cols-3 lg:auto-rows-auto lg:overflow-x-visible lg:pb-[150px]">
{allProfiles.map((profile) => (
<ProfileCard key={profile.id} profile={profile} />
<div key={profile.id} className="shrink-0 w-[200px] lg:w-auto lg:shrink">
<ProfileCard profile={profile} />
</div>
))}
</div>
)}