aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

fix(restaurant/item-page): sticky bar gap + desktop scroll cutoff

Browse source 
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>
This commit is contained in:
Padreug 2026-05-11 20:48:56 +02:00
commit 1651f4b2f1
1 changed files with 8 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/modules/restaurant/views/ItemPage.vue
View file

@ -103,7 +103,7 @@ function back() {
</script> </script>
<template> <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"> <Button variant="ghost" size="sm" class="mb-3" @click="back">
<ArrowLeft class="mr-2 h-4 w-4" /> <ArrowLeft class="mr-2 h-4 w-4" />
Back Back
@ -197,9 +197,14 @@ function back() {
/> />
</section> </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 <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="container mx-auto flex max-w-2xl items-center gap-3">
<div class="inline-flex items-center rounded-full border border-border bg-card"> <div class="inline-flex items-center rounded-full border border-border bg-card">