From 1651f4b2f1b59b81e0edc88accdcad4c048e443b Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 11 May 2026 20:48:56 +0200
Subject: [PATCH] fix(restaurant/item-page): sticky bar gap + desktop scroll
 cutoff

Two layout bugs on the item detail page:

1. Mobile: the sticky add-to-cart bar sat at bottom-16 (64px) but
   BottomNav is h-14 (56px), leaving an 8px gap that showed the
   page background between the two. Anchor it at the BottomNav's
   height + safe-area inset so it's truly flush on every device.

2. Desktop: sm:py-6 overrode the pb-32 padding, so the bottom of
   the page (note textarea, modifier rows for tall items) got
   hidden behind the bottom bars. Switch to sm:pt-6 to keep the
   bottom padding consistent across breakpoints.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/modules/restaurant/views/ItemPage.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/modules/restaurant/views/ItemPage.vue b/src/modules/restaurant/views/ItemPage.vue
index 2b971f7..3342a57 100644
--- a/src/modules/restaurant/views/ItemPage.vue
+++ b/src/modules/restaurant/views/ItemPage.vue
@@ -103,7 +103,7 @@ function back() {
 </script>
 
 <template>
-  <main class="container mx-auto max-w-2xl px-4 pb-32 pt-3 sm:py-6">
+  <main class="container mx-auto max-w-2xl px-4 pb-32 pt-3 sm:pt-6">
     <Button variant="ghost" size="sm" class="mb-3" @click="back">
       <ArrowLeft class="mr-2 h-4 w-4" />
       Back
@@ -197,9 +197,14 @@ function back() {
         />
       </section>
 
-      <!-- Sticky bottom bar with qty stepper + add-to-cart -->
+      <!-- Sticky bottom bar with qty stepper + add-to-cart.
+           Sits flush above BottomNav (h-14 + safe-area inset) on every
+           breakpoint. Previously `bottom-16` left an 8px gap on mobile
+           (BottomNav is h-14 = 56px, not 64px), and `sm:bottom-0` made
+           it overlap the nav on desktop. -->
       <div
-        class="fixed inset-x-0 bottom-16 z-20 border-t border-border bg-background/95 px-4 py-3 backdrop-blur sm:bottom-0"
+        class="fixed inset-x-0 z-20 border-t border-border bg-background/95 px-4 py-3 backdrop-blur"
+        style="bottom: calc(3.5rem + env(safe-area-inset-bottom))"
       >
         <div class="container mx-auto flex max-w-2xl items-center gap-3">
           <div class="inline-flex items-center rounded-full border border-border bg-card">