From 61531410847c32ac64a33a4791babb900accff0e Mon Sep 17 00:00:00 2001
From: ivorycrayon <ivorycrayon@users.noreply.github.com>
Date: Sun, 24 May 2026 11:16:55 -0700
Subject: [PATCH] fix(picker): left-align row name and track count
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stage's text-center cascades into the list and centers each
PlaylistRow's name + track count — misaligned against the
left-anchored cover art and right-anchored Shuffle control.
Add text-left on the list wrapper so row text inherits left
alignment without per-row classes.

Removes the header text-left wrapper added in #70 (misread of
the intent); the section heading returns to Stage's centered
default.
---
 src/components/Picker.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/Picker.tsx b/src/components/Picker.tsx
index 795a54f..6a65b71 100644
--- a/src/components/Picker.tsx
+++ b/src/components/Picker.tsx
@@ -374,13 +374,7 @@ export default function Picker({
       <Stage
         bodyClassName="relative z-50 w-full max-w-2xl gap-8"
         header={
-          // Left-align the heading and subtitle to the picker list below
-          // (which lives in a max-w-2xl column). Stage defaults its header
-          // to text-center for the short status views (landing / success /
-          // error / logged-out), but the picker reads as a section header
-          // above a list, so flush-left lines up with the row content and
-          // the centered copy that used to sit here looked disconnected.
-          <div className="w-full max-w-2xl text-left">
+          <>
             <h1
               ref={headingRef}
               tabIndex={-1}
@@ -395,11 +389,16 @@ export default function Picker({
                 library as a new playlist. Originals stay untouched.
               </p>
             ) : null}
-          </div>
+          </>
         }
         body={
           <>
-            <div className="w-full">
+            {/* text-left overrides Stage's text-center default for the
+                list — text-align is inherited, so the row name + track
+                count inside each PlaylistRow pick this up without needing
+                their own alignment classes. The loading + empty paragraphs
+                below carry their own text-center, so they stay centered. */}
+            <div className="w-full text-left">
               {state.status === "loading" ? (
                 <p className="py-12 text-center text-zinc-400">
                   Loading your playlists