Error: Snapshot `ItemsSection > should match snapshot with view card 1` mismatched - Expected + Received @@ -482,11 +482,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -963,11 +963,11 @@ </div> </div> </div> </div> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none" @@ -988,11 +988,11 @@ > Previous slide </span> </button> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -right-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none" @@ -1507,11 +1507,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -1988,11 +1988,11 @@ </div> </div> </div> </div> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-

Error: Snapshot `ItemsSection > should match snapshot as artists with view card 1` mismatched - Expected + Received @@ -69,11 +69,11 @@ class="w-[2rem] text-center text-5xl" > 2 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -230,11 +230,11 @@ class="w-[2rem] text-center text-5xl" > 1 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -389,11 +389,11 @@ class="w-[2rem] text-center text-5xl" > 3 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -515,11 +515,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -575,11 +575,11 @@ class="w-[2rem] text-center text-5xl" > 1 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-col" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -736,11 +736,11 @@ class="w-[2rem] text-center text-5xl" > 2 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-col" + class="flex h-full fl

Error: Snapshot `ItemTopCard > should match snapshot as artist 1` mismatched - Expected + Received @@ -40,11 +40,11 @@ </div> <div class="flex w-full flex-col items-center justify-center gap-4" > <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -107,11 +107,11 @@ </div> <div class="flex w-full flex-col items-center justify-center gap-4" > <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop ❯ app/components/items/cards/item-top-card.spec.tsx:25:18

Error: Snapshot `ItemsList > should match snapshot with position and top 1` mismatched - Expected + Received @@ -54,11 +54,11 @@ class="w-[2rem] text-center text-5xl" > 2 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -215,11 +215,11 @@ class="w-[2rem] text-center text-5xl" > 1 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -374,11 +374,11 @@ class="w-[2rem] text-center text-5xl" > 3 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-row" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -500,11 +500,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -560,11 +560,11 @@ class="w-[2rem] text-center text-5xl" > 1 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-col" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80" > pop @@ -721,11 +721,11 @@ class="w-[2rem] text-center text-5xl" > 2 </span> <div - class="flex h-full flex-wrap justify-center gap-2 flex-col" + class="flex h-full flex-row flex-wrap justify-center gap-2" > <div class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring

Error: Snapshot `ItemsList > should match snapshot with plays and top 1` mismatched - Expected + Received @@ -266,11 +266,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -546,11 +546,11 @@ </div> </div> </div> </div> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none" @@ -571,11 +571,11 @@ > Previous slide </span> </button> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -right-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none" @@ -869,11 +869,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -1149,11 +1149,11 @@ </div> </div> </div> </div> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none" @@

Error: Snapshot `ItemsList > should match snapshot with playTime and top 1` mismatched - Expected + Received @@ -266,11 +266,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -546,11 +546,11 @@ </div> </div> </div> </div> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none" @@ -571,11 +571,11 @@ > Previous slide </span> </button> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -right-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white right-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none" @@ -869,11 +869,11 @@ </div> </div> </div> <div aria-roledescription="carousel" - class="relative max-w-[70vw] self-center sm:max-w-[300px] md:hidden" + class="relative max-w-full self-center sm:max-w-[400px] md:hidden md:max-w-[300px]" role="region" > <div class="overflow-hidden" > @@ -1149,11 +1149,11 @@ </div> </div> </div> </div> <button - class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/3 -translate-y-1/2" + class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white left-0 top-1/3 -translate-y-1/2" disabled="" > <svg class="h-4 w-4" fill="none"