refactor(app/layout.tsx): optimize layout classes and remove unnecessary min-h-0

fix(HorizontalAdBanner.tsx): display placeholder in development mode for ads
feat(BottomNavigation.tsx): make bottom nav fixed on small screens for better UX
fix(workout-stepper-footer.tsx): adjust sticky footer position for mobile responsiveness

app/[locale]/(app)/layout.tsx

@@ -11,10 +11,9 @@ interface RootLayoutProps {
 
 export default async function RootLayout({ children }: RootLayoutProps) {
   return (
-    <div className="mx-auto card w-full max-w-3xl min-h-[500px] max-h-[90vh] bg-white dark:bg-[#232324] shadow-xl border border-base-200 dark:border-slate-700 flex flex-col justify-between overflow-hidden max-sm:rounded-none max-sm:h-full rounded-lg">
+    <div className="mx-auto card w-full max-w-3xl min-h-[500px] max-sm:min-h-screen bg-white dark:bg-[#232324] shadow-xl border border-base-200 dark:border-slate-700 flex flex-col max-sm:rounded-none rounded-lg">
       <Header />
-      {/* TODO: remove min-h-0 if something is broken */}
-      <div className="flex-1 overflow-auto flex flex-col min-h-0">{children}</div>
+      <div className="flex-1 flex flex-col max-sm:pb-16">{children}</div>
       <BottomNavigation />
       <Footer />
     </div>

src/components/ads/HorizontalAdBanner.tsx

@@ -32,7 +32,9 @@ export function HorizontalAdBanner({ adSlot, ezoicPlacementId }: HorizontalAdBan
       {/* Below lg: show ezoic if configured, sponsor carousel only if not in ezoic mode */}
       <div className="lg:hidden">
         <AdWrapper>
-          {useEzoic ? (
+          {isDevelopment ? (
+            <AdPlaceholder height="50px" type="Mobile Ad Banner" width="100%" />
+          ) : useEzoic ? (
             <EzoicAd className="w-full" placementId={ezoicPlacementId} />
           ) : env.NEXT_PUBLIC_AD_PROVIDER !== "ezoic" ? (
             <SponsorHorizontalBanner />

src/features/layout/BottomNavigation.tsx

@@ -82,7 +82,7 @@ export function BottomNavigation() {
   ];
 
   return (
-    <nav className="relative bg-white/90 dark:bg-[#232324]/90 backdrop-blur-xl border-t border-[#4F8EF7]/15 dark:border-slate-700/50">
+    <nav className="relative bg-white/90 dark:bg-[#232324]/90 backdrop-blur-xl border-t border-[#4F8EF7]/15 dark:border-slate-700/50 max-sm:fixed max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:z-40">
       {/* Subtle background gradient */}
       <div className="absolute inset-0 bg-gradient-to-r from-[#4F8EF7]/3 via-transparent to-[#25CB78]/3 pointer-events-none" />
 

src/features/workout-builder/ui/workout-stepper-footer.tsx

@@ -25,7 +25,7 @@ export function WorkoutBuilderFooter({
   const isFinalStep = currentStep === totalSteps;
 
   return (
-    <div className="w-full sticky bottom-0 ">
+    <div className="w-full sticky bottom-0 max-sm:bottom-14 z-30">
       {/* Mobile layout - vertical stack */}
       <div className="flex flex-col gap-4 px-2 sm:px-6 pb-2">
         {/* Center stats on top for mobile */}