feat: add gallery upload and fix mobile header issues

- Added 'Upload from Gallery' button to CameraCapture component
- Implemented secondary file input without 'capture' attribute to allow gallery selection on mobile
- Fixed overlapping header elements on mobile by making the header responsive
- Compacted 'Dram of the Day' button on small screens
- Added translations for the new gallery upload feature
This commit is contained in:
2025-12-18 15:48:11 +01:00
parent 960fa89fc1
commit 0f56c8b0f4
6 changed files with 62 additions and 34 deletions

View File

@@ -129,11 +129,11 @@ export default function Home() {
return (
<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">
<header className="w-full flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-0">
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tighter">
WHISKY<span className="text-amber-600">VAULT</span>
</h1>
<div className="flex items-center gap-4">
<div className="flex flex-wrap items-center justify-center sm:justify-end gap-3 md:gap-4">
<LanguageSwitcher />
<DramOfTheDay bottles={bottles} />
<button