Mobile UX polish: stacking buttons, visible nickname button, responsive headers

This commit is contained in:
fullsizemalt 2025-12-25 23:05:31 -08:00
parent 0bfe25268c
commit 873b45d81d
2 changed files with 10 additions and 10 deletions

View file

@ -93,15 +93,15 @@ export default async function Home() {
<br /> <br />
Discover shows, share ratings, and explore the music together. Discover shows, share ratings, and explore the music together.
</p> </p>
<div className="flex gap-4"> <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
<Link href="/performances"> <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" /> <Trophy className="h-4 w-4" />
Top Performances Top Performances
</Button> </Button>
</Link> </Link>
<Link href="/shows"> <Link href="/shows">
<Button variant="outline" size="lg"> <Button variant="outline" size="lg" className="w-full sm:w-auto">
Browse Shows Browse Shows
</Button> </Button>
</Link> </Link>

View file

@ -72,14 +72,14 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
</Button> </Button>
</Link> </Link>
<div> <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()} {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> </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 && ( {show.tags && show.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mt-1"> <div className="flex flex-wrap gap-2 mt-1">
{show.tags.map((tag: any) => ( {show.tags.map((tag: any) => (
@ -207,7 +207,7 @@ export default async function ShowDetailPage({ params }: { params: Promise<{ slu
)} )}
{/* Suggest Nickname Button */} {/* 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 <SuggestNicknameDialog
performanceId={perf.id} performanceId={perf.id}
songTitle={perf.song?.title || "Song"} songTitle={perf.song?.title || "Song"}