From 873b45d81db07708e15e04d3c3a2455bd2099f4a Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Thu, 25 Dec 2025 23:05:31 -0800
Subject: [PATCH] Mobile UX polish: stacking buttons, visible nickname button,
 responsive headers

---
 frontend/app/page.tsx              |  6 +++---
 frontend/app/shows/[slug]/page.tsx | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index a548331..50513fb 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -93,15 +93,15 @@ export default async function Home() {
           <br />
           Discover shows, share ratings, and explore the music together.
         </p>
-        <div className="flex gap-4">
+        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
           <Link href="/performances">
-            <Button size="lg" className="gap-2">
+            <Button size="lg" className="gap-2 w-full sm:w-auto">
               <Trophy className="h-4 w-4" />
               Top Performances
             </Button>
           </Link>
           <Link href="/shows">
-            <Button variant="outline" size="lg">
+            <Button variant="outline" size="lg" className="w-full sm:w-auto">
               Browse Shows
             </Button>
           </Link>
diff --git a/frontend/app/shows/[slug]/page.tsx b/frontend/app/shows/[slug]/page.tsx
index 9920567..7c7cc75 100644
--- a/frontend/app/shows/[slug]/page.tsx
+++ b/frontend/app/shows/[slug]/page.tsx
@@ -72,14 +72,14 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
                         </Button>
                     </Link>
                     <div>
-                        <h1 className="text-3xl font-bold tracking-tight">
+                        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">
                             {new Date(show.date).toLocaleDateString()}
-                            {show.venue && (
-                                <span className="font-normal text-muted-foreground ml-2">
-                                    - {show.venue.name}, {show.venue.city}, {show.venue.state}
-                                </span>
-                            )}
                         </h1>
+                        {show.venue && (
+                            <p className="text-base sm:text-lg text-muted-foreground mt-1">
+                                {show.venue.name}, {show.venue.city}, {show.venue.state}
+                            </p>
+                        )}
                         {show.tags && show.tags.length > 0 && (
                             <div className="flex flex-wrap gap-2 mt-1">
                                 {show.tags.map((tag: any) => (
@@ -207,7 +207,7 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
                                                                 )}
 
                                                                 {/* Suggest Nickname Button */}
-                                                                <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                                                                <div className="opacity-50 md:opacity-30 md:group-hover:opacity-100 transition-opacity">
                                                                     <SuggestNicknameDialog
                                                                         performanceId={perf.id}
                                                                         songTitle={perf.song?.title || "Song"}