feat: optimize layout for mobile devices (Pixel 9 Pro)

This commit is contained in:
2025-12-18 09:59:31 +01:00
parent 9ba1f8bd56
commit 330c8e1cc0
5 changed files with 29 additions and 29 deletions

View File

@@ -29,8 +29,8 @@ export default async function BottlePage({ params }: { params: { id: string } })
.order('created_at', { ascending: false });
return (
<main className="min-h-screen bg-zinc-50 dark:bg-black p-6 md:p-12 lg:p-24">
<div className="max-w-4xl mx-auto space-y-12">
<main className="min-h-screen bg-zinc-50 dark:bg-black p-4 md:p-12 lg:p-24">
<div className="max-w-4xl mx-auto space-y-6 md:space-y-12">
{/* Back Button */}
<Link
href="/"
@@ -52,10 +52,10 @@ export default async function BottlePage({ params }: { params: { id: string } })
<div className="space-y-6">
<div>
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tight leading-tight">
<h1 className="text-2xl md:text-4xl font-black text-zinc-900 dark:text-white tracking-tighter leading-tight">
{bottle.name}
</h1>
<p className="text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
<p className="text-sm md:text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
{bottle.whiskybase_id && (
<div className="mt-4">

View File

@@ -102,7 +102,7 @@ export default function Home() {
}
return (
<main className="flex min-h-screen flex-col items-center gap-12 p-6 md:p-24 bg-zinc-50 dark:bg-black">
<main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-zinc-50 dark:bg-black">
<div className="z-10 max-w-5xl w-full flex flex-col items-center gap-8">
<header className="w-full flex justify-between items-center">
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tighter">