Render practice rating hints as visible button subtext (#6000)

client/src/components/songbook/PracticeLogger.jsx

@@ -59,17 +59,17 @@ export default function PracticeLogger({ song, onLogged, className = '' }) {
         </span>
       </div>
 
-      <div className="flex flex-wrap gap-2" role="group" aria-label="Log a practice run">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2" role="group" aria-label="Log a practice run">
         {SONG_PRACTICE_RATINGS.map((rating) => (
           <button
             key={rating.quality}
             type="button"
             onClick={() => logPractice(rating.quality)}
             disabled={logging}
-            title={rating.hint}
-            className="flex-1 min-w-[84px] min-h-[44px] px-3 py-2 text-sm rounded-lg border border-port-border text-gray-300 hover:text-white hover:border-port-accent/50 hover:bg-port-border/50 disabled:opacity-50"
+            className="min-h-[48px] px-2.5 py-2 text-left sm:text-center rounded-lg border border-port-border text-gray-300 hover:text-white hover:border-port-accent/50 hover:bg-port-border/50 disabled:opacity-50 flex flex-col justify-center"
           >
-            {rating.label}
+            <span className="text-xs sm:text-sm font-semibold text-white">{rating.label}</span>
+            <span className="text-[10px] text-gray-400 font-normal leading-tight mt-0.5">{rating.hint}</span>
           </button>
         ))}
       </div>

client/src/components/songbook/PracticeLogger.test.jsx

@@ -47,13 +47,21 @@ describe('PracticeLogger', () => {
     expect(screen.getByText(/1 session ·/)).toBeTruthy();
   });
 
+  it('renders each rating hint visibly for touch users, not hover-only', () => {
+    render(<PracticeLogger song={song()} />);
+    expect(screen.getByText('Fell apart — regress a stage and practice again today')).toBeTruthy();
+    expect(screen.getByText('Got through it — hold the stage, review sooner')).toBeTruthy();
+    expect(screen.getByText('Played it with hesitation — advance a stage')).toBeTruthy();
+    expect(screen.getByText('Played it clean — advance a stage, review later')).toBeTruthy();
+  });
+
   it('posts the grade and hands the updated record back — no client-side scheduling', async () => {
     const updated = { ...song(), stage: 'learned', practice: { nextReview: future(), sessions: 1 } };
     practiceSong.mockResolvedValue(updated);
     const onLogged = vi.fn();
     render(<PracticeLogger song={song()} onLogged={onLogged} />);
 
-    fireEvent.click(screen.getByRole('button', { name: 'Solid' }));
+    fireEvent.click(screen.getByRole('button', { name: /Solid/ }));
 
     await waitFor(() => expect(onLogged).toHaveBeenCalledWith(updated));
     // The grade is the ONLY thing sent; the server owns stage + schedule.
@@ -64,7 +72,7 @@ describe('PracticeLogger', () => {
   it('sends the low grade for a failed run', async () => {
     practiceSong.mockResolvedValue({ ...song(), stage: 'learning', practice: { nextReview: new Date().toISOString() } });
     render(<PracticeLogger song={song()} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Struggled' }));
+    fireEvent.click(screen.getByRole('button', { name: /Struggled/ }));
     await waitFor(() => expect(practiceSong).toHaveBeenCalledWith('song-1', 0, { silent: true }));
   });
 
@@ -73,7 +81,7 @@ describe('PracticeLogger', () => {
     const onLogged = vi.fn();
     render(<PracticeLogger song={song()} onLogged={onLogged} />);
 
-    fireEvent.click(screen.getByRole('button', { name: 'Clean' }));
+    fireEvent.click(screen.getByRole('button', { name: /Clean/ }));
 
     await waitFor(() => expect(toast.error).toHaveBeenCalled());
     expect(onLogged).not.toHaveBeenCalled();