From 314967b31b3e4b2c0f4e4536c2c733ba5fe13233 Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Thu, 18 Dec 2025 10:04:11 +0100
Subject: [PATCH] fix: resolve mobile UI issues (scrollbar and overlapping
 form)

---
 src/app/bottles/[id]/page.tsx |  4 ++--
 src/app/globals.css           | 18 +++++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/bottles/[id]/page.tsx b/src/app/bottles/[id]/page.tsx
index 6d15ac1..8d81200 100644
--- a/src/app/bottles/[id]/page.tsx
+++ b/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>
diff --git a/src/app/globals.css b/src/app/globals.css
index fd81e88..50baef2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -18,10 +18,18 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
+  background: linear-gradient(to bottom,
       transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
+
+@layer utilities {
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
\ No newline at end of file