From 34678c4e0e8c11a4ba2d776400df935bea057fd8 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Thu, 11 Jun 2026 11:17:59 +0330
Subject: [PATCH] Home: center the content in a max-width stage (fixes desktop
 right-stacking)

The Home screen wasn't centered like the sub-pages, so on desktop/tablet its
content drifted to the RTL start edge with dead felt on the left. Wrap it in a
centered max-w-3xl/landscape:max-w-5xl stage, vertically center the mode cards,
and size them up for tablet/desktop (min-h + larger max-w).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/HomeScreen.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HomeScreen.tsx b/src/components/HomeScreen.tsx
index 5c2351e..ad9fb09 100644
--- a/src/components/HomeScreen.tsx
+++ b/src/components/HomeScreen.tsx
@@ -93,8 +93,8 @@ export function HomeScreen() {
     <main className="persian-pattern relative h-dvh w-full overflow-hidden overscroll-contain safe-top safe-x flex flex-col landscape:flex-row">
       <FloatingSuits />
 
-      {/* content */}
-      <div className="relative z-10 flex flex-col h-full min-h-0 gap-2.5 short:gap-2">
+      {/* content — centered "stage" so desktop/tablet stay balanced (not edge-stretched) */}
+      <div className="relative z-10 mx-auto w-full max-w-3xl landscape:max-w-5xl flex flex-col h-full min-h-0 gap-2.5 short:gap-2">
         <TopBar />
 
         {/* title */}
@@ -107,7 +107,7 @@ export function HomeScreen() {
         <motion.div
           initial={{ opacity: 0, y: 14 }}
           animate={{ opacity: 1, y: 0 }}
-          className="flex-1 min-h-0 flex items-stretch justify-center gap-3 short:gap-2"
+          className="flex-1 min-h-0 flex items-center justify-center gap-3 sm:gap-4 short:gap-2"
         >
           <ModeCard
             tone="gold"
@@ -210,7 +210,7 @@ function ModeCard({
         color: c.fg,
         boxShadow: `0 7px 0 ${c.lo}, 0 12px 20px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.4)`,
       }}
-      className="relative flex-1 max-w-[210px] rounded-3xl px-3 py-5 short:py-3 flex flex-col items-center justify-center gap-2.5 short:gap-1.5 text-center"
+      className="relative flex-1 max-w-[220px] sm:max-w-[260px] min-h-[200px] sm:min-h-[230px] short:min-h-[140px] rounded-3xl px-3 py-5 short:py-3 flex flex-col items-center justify-center gap-2.5 short:gap-1.5 text-center"
     >
       {badge && (
         <span className="absolute top-2 ltr:right-2 rtl:left-2 rounded-full bg-rose-500 px-2 py-0.5 text-[10px] font-bold text-white shadow">