fix: size the v2 product detail to the visible screen so its action bar stays on screen

اپ۲: دکمه‌ی «افزودن به سفارش» در صفحه‌ی جزئیات محصول دیگر از پایین صفحه بیرون نمی‌افتد و همیشه دیده می‌شود.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/user-app-v2/src/components/product/ProductMorph.vue

@@ -508,8 +508,8 @@ onBeforeUnmount(() => {
 }
 
 // The scroller for pages that do not scroll themselves (v1's SingleProduct
-// grows with its content; v2's is its own 100vh scroller and never overflows
-// this). The page's transform is applied HERE rather than on anything inside:
+// grows with its content; v2's is its own 100dvh scroller and never overflows
+// this — see the note on .pd there). The page's transform is applied HERE rather than on anything inside:
 // this box is already pinned to the viewport, so a `position: fixed` action bar
 // inside the page stays exactly where it is while the transform is running.
 .pm__sheet {

apps/user-app-v2/src/components/product/SingleProduct.vue

@@ -538,9 +538,17 @@ onBeforeUnmount(() => {
 // container and pin itself to the viewport, sitting over the drawer. Scrolling
 // this element instead means the gallery is positioned against THIS box in
 // both cases, so the behaviour is identical however the detail view is opened.
+//
+// `dvh`, not `vh`: on a phone 100vh is the height with the browser's address
+// bar collapsed. The bar is only collapsed once the page underneath has been
+// scrolled to its end. Anywhere else it is showing, so a 100vh page is taller
+// than the overlay holding it, and the sticky action bar at its bottom lands
+// below the screen. 100dvh is the height actually on screen. vh stays as the
+// fallback for browsers without dvh.
 .pd {
   position: relative;
   height: 100vh;
+  height: 100dvh;
   overflow-y: auto;
   overflow-x: hidden;
   background: @page;
@@ -973,6 +981,7 @@ onBeforeUnmount(() => {
   // this box — so filling the remainder is exactly one screen, with no extra
   // scroll left over at the bottom.
   min-height: calc(100vh - 60px - 72px - env(safe-area-inset-top, 0px));
+  min-height: calc(100dvh - 60px - 72px - env(safe-area-inset-top, 0px));
 }
 
 .pd__grip {