edit overflow: hidden

src/components/booking/DesktopBookingFlow.vue

@@ -160,25 +160,32 @@
             </dl>
             <p v-if="bookingError" class="mt-4 text-sm text-red-600">{{ bookingError }}</p>
           </div>
-
-          <div
-            class="hidden flex-wrap items-center justify-between gap-3 lg:flex"
-          >
-            <AppButton variant="ghost" class="!w-auto" @click="goBack">
-              مرحله قبل
-            </AppButton>
-            <AppButton
-              class="!w-auto min-w-[140px]"
-              :disabled="!canProceed"
-              :loading="bookingLoading && currentStep === 5"
-              @click="goNext"
-            >
-              {{ nextButtonLabel }}
-            </AppButton>
-          </div>
         </div>
       </div>
 
+      <div
+        v-if="showDesktopActions"
+        class="hidden flex-wrap items-center justify-between gap-3 lg:flex"
+      >
+        <AppButton
+          v-if="currentStep > 1"
+          variant="ghost"
+          class="!w-auto"
+          @click="goBack"
+        >
+          مرحله قبل
+        </AppButton>
+        <div v-else aria-hidden="true" />
+        <AppButton
+          class="!w-auto min-w-[140px]"
+          :disabled="!canProceed"
+          :loading="bookingLoading && currentStep === 5"
+          @click="goNext"
+        >
+          {{ nextButtonLabel }}
+        </AppButton>
+      </div>
+
       <div
         v-if="showMobileActions"
         class="fixed inset-x-0 bottom-16 z-20 border-t border-border bg-surface/95 backdrop-blur lg:hidden"
@@ -422,6 +429,8 @@ const showMobileActions = computed(
     !(currentStep.value > 2 && !auth.isLoggedIn),
 );
 
+const showDesktopActions = showMobileActions;
+
 const canProceed = computed(() => {
   if (currentStep.value === 1) {
     return classStepRequired.value ? Boolean(selectedClassId.value) : true;

src/components/landing/DesktopLandingPage.vue

@@ -24,8 +24,10 @@ import HomeFeatureBar from '@/components/home/HomeFeatureBar.vue';
 import HomeHeroSection from '@/components/home/HomeHeroSection.vue';
 import HomeServicesSection from '@/components/home/HomeServicesSection.vue';
 import DesktopSiteLayout from '@/layouts/DesktopSiteLayout.vue';
+import { useAuthStore } from '@/stores/auth';
 import { useTenantStore } from '@/stores/tenant';
 import type { LandingServiceItem } from '@/types/landing';
+import { bookingDestination } from '@/utils/auth-redirect';
 
 const props = withDefaults(
   defineProps<{
@@ -38,6 +40,7 @@ const props = withDefaults(
 );
 
 const router = useRouter();
+const auth = useAuthStore();
 const tenant = useTenantStore();
 const { singleBusinessId } = storeToRefs(tenant);
 
@@ -58,10 +61,6 @@ function goToBooking() {
     return;
   }
 
-  void router.push({
-    name: 'app-business-detail',
-    params: { id },
-    hash: '#services',
-  });
+  void router.push(bookingDestination(id, auth.isLoggedIn, 'services'));
 }
 </script>

src/components/shell/AppShell.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-shell-root min-h-[100dvh] w-full bg-surface-2 lg:bg-surface-3">
     <div
-      class="app-shell-frame mx-auto flex h-[100dvh] max-h-[100dvh] w-full min-w-0 max-w-full flex-col overflow-hidden bg-surface shadow-xl shadow-black/5 dark:shadow-black/30 max-w-app lg:max-w-none lg:shadow-none"
+      class="app-shell-frame mx-auto flex w-full min-w-0 max-w-full flex-col bg-surface shadow-xl shadow-black/5 dark:shadow-black/30 max-w-app max-lg:h-[100dvh] max-lg:max-h-[100dvh] max-lg:overflow-hidden lg:min-h-dvh lg:shadow-none"
     >
       <slot />
     </div>

src/styles/main.css

@@ -29,11 +29,9 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
     -webkit-overflow-scrolling: touch;
-    height: 100%;
-    overflow: hidden;
   }
 
-  @supports (-webkit-touch-callout: none) {
+  @media (max-width: 1023px) {
     html,
     body,
     #app {
@@ -41,15 +39,17 @@
       overflow: hidden;
     }
 
-    .app-shell-root {
-      min-height: 100%;
-      min-height: -webkit-fill-available;
-    }
+    @supports (-webkit-touch-callout: none) {
+      .app-shell-root {
+        min-height: 100%;
+        min-height: -webkit-fill-available;
+      }
 
-    .app-shell-frame {
-      height: 100%;
-      max-height: 100%;
-      min-height: -webkit-fill-available;
+      .app-shell-frame {
+        height: 100%;
+        max-height: 100%;
+        min-height: -webkit-fill-available;
+      }
     }
   }
 
@@ -88,7 +88,5 @@
 
   #app {
     min-height: 100dvh;
-    height: 100%;
-    overflow: hidden;
   }
 }

src/utils/auth-redirect.ts

@@ -17,3 +17,26 @@ export function loginRouteWithRedirect(redirectPath: string) {
     query: { redirect: redirectPath },
   };
 }
+
+export function businessBookingPath(businessId: string, hash?: string) {
+  const normalizedHash = hash?.replace(/^#/, '');
+  const base = `/app/businesses/${businessId}`;
+  return normalizedHash ? `${base}#${normalizedHash}` : base;
+}
+
+export function bookingDestination(
+  businessId: string,
+  isLoggedIn: boolean,
+  hash?: string,
+) {
+  if (!isLoggedIn) {
+    return loginRouteWithRedirect(businessBookingPath(businessId, hash));
+  }
+
+  const normalizedHash = hash?.replace(/^#/, '');
+  return {
+    name: 'app-business-detail' as const,
+    params: { id: businessId },
+    ...(normalizedHash ? { hash: normalizedHash } : {}),
+  };
+}

src/views/app/AppHomeView.vue

@@ -47,6 +47,7 @@ import { useAuthStore } from '@/stores/auth';
 import { useTenantStore } from '@/stores/tenant';
 import type { LandingServiceItem } from '@/types/landing';
 import { fetchLandingServices } from '@/utils/landing-services';
+import { bookingDestination } from '@/utils/auth-redirect';
 
 const isDesktop = useMediaQuery('(min-width: 1024px)');
 const router = useRouter();
@@ -96,10 +97,7 @@ function goToBooking() {
   const id = tenant.singleBusinessId;
   if (!id) return;
 
-  void router.push({
-    name: 'app-business-detail',
-    params: { id },
-  });
+  void router.push(bookingDestination(id, auth.isLoggedIn));
 }
 
 watch(showSingleBusinessLanding, (show) => {