fix: resolve mobile UI issues (scrollbar and overlapping form)

src/app/bottles/[id]/page.tsx

@@ -123,9 +123,9 @@ export default async function BottlePage({ params }: { params: { id: string } })
                         </div>
                     </div>
 
-                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start">
                         {/* Form */}
-                        <div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 sticky top-24">
+                        <div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 md:sticky md:top-24">
                             <h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
                                 <Droplets size={20} /> Neu Verkosten
                             </h3>

src/app/globals.css

@@ -18,10 +18,18 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
+  background: linear-gradient(to bottom,
-      to bottom,
       transparent,
-      rgb(var(--background-end-rgb))
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
-    )
-    rgb(var(--background-start-rgb));
 }
+
+@layer utilities {
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}