From 78dea770d76562251c8e11fb7b548951afbb74a1 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Thu, 11 Jun 2026 01:21:21 +0330
Subject: [PATCH] Landscape: add short-height variant; fix Home column overflow
 on landscape phones

Root cause: a landscape phone is wide (>=640px) but short, so width-based sm:
roominess inflated the title/buttons while the screen height was small -> the
right column overflowed (vs-Computer card cut off). Add a height-based
`short:` variant (@media max-height:520px) and compact Home's branding +
action cards under it so the column fits short landscape viewports.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/globals.css           |  6 ++++++
 src/components/HomeScreen.tsx | 28 ++++++++++++++--------------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 5baafe2..6c7d460 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,11 @@
 @import "tailwindcss";
 
+/* Height-based variants for short landscape phones (wide but short, where the
+   width-based sm: roominess would otherwise overflow vertically). Use `short:`
+   to compact and `tall:` for genuinely tall screens. */
+@custom-variant short (@media (max-height: 520px));
+@custom-variant tall (@media (min-height: 700px));
+
 /*
   FlatRender Hokm — "Persian Luxury" theme.
   Deep navy/teal table, gold filigree accents, geometric motifs.
diff --git a/src/components/HomeScreen.tsx b/src/components/HomeScreen.tsx
index 25b1626..8bf268b 100644
--- a/src/components/HomeScreen.tsx
+++ b/src/components/HomeScreen.tsx
@@ -94,17 +94,17 @@ export function HomeScreen() {
         >
           {/* logo + title on one row (no overflow); subtitle beneath the title */}
           <div className="flex items-center gap-3">
-            <div className="size-12 sm:size-14 shrink-0 rounded-2xl gold-border flex items-center justify-center bg-navy-900 shadow-lg">
-              <span className="gold-text text-3xl font-black leading-none">♠</span>
+            <div className="size-12 sm:size-14 short:size-10 shrink-0 rounded-2xl gold-border flex items-center justify-center bg-navy-900 shadow-lg">
+              <span className="gold-text text-3xl short:text-2xl font-black leading-none">♠</span>
             </div>
             <div className="text-start">
-              <h1 className="gold-text text-3xl sm:text-4xl font-black tracking-tight leading-none">
+              <h1 className="gold-text text-3xl sm:text-4xl short:text-2xl font-black tracking-tight leading-none">
                 {t("app.title")}
               </h1>
               <p className="text-cream/60 mt-1.5 text-xs sm:text-sm leading-none">{t("app.subtitle")}</p>
             </div>
           </div>
-          <div className="mt-3">
+          <div className="mt-3 short:mt-1.5">
             <OnlinePlayers />
           </div>
         </motion.div>
@@ -119,13 +119,13 @@ export function HomeScreen() {
             transition={{ delay: 0.05 }}
             whileTap={{ scale: 0.985 }}
             onClick={playOnline}
-            className="press-3d btn-gold relative w-full rounded-3xl px-5 py-4 sm:py-5 flex items-center gap-4 text-start"
+            className="press-3d btn-gold relative w-full rounded-3xl px-5 py-4 sm:py-5 short:py-2.5 flex items-center gap-4 short:gap-3 text-start"
           >
-            <span className="grid size-12 sm:size-14 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
-              <Play className="size-7" fill="currentColor" />
+            <span className="grid size-12 sm:size-14 short:size-10 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
+              <Play className="size-7 short:size-5" fill="currentColor" />
             </span>
             <span className="flex-1 min-w-0">
-              <span className="block text-xl sm:text-2xl font-black text-[#2a1f04] leading-tight truncate">
+              <span className="block text-xl sm:text-2xl short:text-lg font-black text-[#2a1f04] leading-tight truncate">
                 {t("menu.online")}
               </span>
               <span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
@@ -135,7 +135,7 @@ export function HomeScreen() {
         </div>
 
         {/* vs computer */}
-        <div className="mt-3">
+        <div className="mt-3 short:mt-2">
           <PrimaryCard
             icon={<Bot className="size-6" />}
             title={t("menu.vsComputer")}
@@ -143,11 +143,11 @@ export function HomeScreen() {
             onClick={playVsComputer}
           />
           {/* Normal / Speed mode picker */}
-          <div className="mt-2 glass rounded-2xl p-1 flex gap-1">
+          <div className="mt-2 short:mt-1.5 glass rounded-2xl p-1 flex gap-1">
             <button
               onClick={() => setSpeed(false)}
               className={cn(
-                "flex-1 rounded-xl py-2 text-xs font-bold transition flex items-center justify-center gap-1.5",
+                "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
                 !speed ? "btn-gold" : "text-cream/60 hover:text-cream"
               )}
             >
@@ -156,7 +156,7 @@ export function HomeScreen() {
             <button
               onClick={() => setSpeed(true)}
               className={cn(
-                "flex-1 rounded-xl py-2 text-xs font-bold transition flex items-center justify-center gap-1.5",
+                "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
                 speed ? "btn-gold" : "text-cream/60 hover:text-cream"
               )}
             >
@@ -235,13 +235,13 @@ function PrimaryCard({
       whileTap={{ scale: 0.985 }}
       onClick={onClick}
       className={
-        "press-3d w-full rounded-3xl px-5 py-4 flex items-center gap-4 text-start " +
+        "press-3d w-full rounded-3xl px-5 py-4 short:py-2.5 flex items-center gap-4 short:gap-3 text-start " +
         (primary ? "btn-gold" : "glass")
       }
     >
       <span
         className={
-          "grid size-12 shrink-0 place-items-center rounded-2xl " +
+          "grid size-12 short:size-10 shrink-0 place-items-center rounded-2xl " +
           (primary ? "bg-black/15 text-[#2a1f04]" : "bg-teal-500/15 text-teal-300")
         }
       >