feat(FN-345): fix skeleton layout shift, dialog overflow, and safe-area padding (+1 more)

Commits merged:
- fix(FN-345): add mobile-safe max-width to cancel confirm dialog
- fix(FN-345): fix skeleton layout shift, dialog overflow, and safe-area padding

Files changed:
apps/web/src/routes/dashboard/subscription/index.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

Fusion-Task-Id: FN-345

apps/web/src/routes/dashboard/subscription/index.tsx

@@ -510,10 +510,13 @@ export function SubscriptionPage() {
   // ─── Loading state ─────────────────────────────────────────────────────────
   if (isLoading) {
     return (
-      <div className="mx-auto max-w-5xl space-y-4">
+      <div className="mx-auto max-w-5xl space-y-8">
         <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-48 w-full rounded-2xl" />
-        <Skeleton className="h-48 w-full rounded-2xl" />
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {[0, 1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-48 w-full rounded-2xl" />
+          ))}
+        </div>
       </div>
     );
   }
@@ -742,7 +745,7 @@ export function SubscriptionPage() {
           setCancelDialogOpen(open);
         }}
       >
-        <DialogContent>
+        <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-lg">
           <DialogHeader>
             <DialogTitle>{t("subscription.cancelConfirmTitle")}</DialogTitle>
             <DialogDescription>{t("subscription.cancelConfirmDescription")}</DialogDescription>
@@ -1250,7 +1253,7 @@ function StickyCta({
   }
 
   return (
-    <div className="fixed inset-x-0 bottom-0 z-40 animate-fade-in-up border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+    <div className="fixed inset-x-0 bottom-0 z-40 animate-fade-in-up border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 pb-[env(safe-area-inset-bottom,0px)]">
       <div className="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-3 px-6 py-3">
         <div className="flex flex-1 items-baseline gap-3">
           <span className="text-sm font-semibold">
@@ -1713,7 +1716,7 @@ function DowngradeOfferDialog({
   void plansData;
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-md">
         <DialogHeader>
           <DialogTitle>{t("subscription.downgradeOffer.title")}</DialogTitle>
           <DialogDescription>{t("subscription.downgradeOffer.description")}</DialogDescription>