From 60d44100a2c483e99085123bb08c0d639157d856 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Tue, 16 Jun 2026 20:43:36 +0330
Subject: [PATCH] ui(post-match): compact the result modal so it fits mobile
 without scrolling

The end-of-match modal (title + reward rows + XP bar + full roster + button)
was too tall on phones and scrolled. Shrink the mobile sizes (padding, emoji,
title, hero-coins, spacing) with sm: bumping back up on larger screens, and
tighten the player roster rows. Fits a portrait phone in one view.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/online/MatchPlayersList.tsx      |  8 ++++----
 src/components/online/PostMatchRewardsModal.tsx | 16 ++++++++--------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/online/MatchPlayersList.tsx b/src/components/online/MatchPlayersList.tsx
index 8b12c64..b1b7329 100644
--- a/src/components/online/MatchPlayersList.tsx
+++ b/src/components/online/MatchPlayersList.tsx
@@ -30,14 +30,14 @@ export function MatchPlayersList() {
   };
 
   return (
-    <div className="mt-5 text-start">
-      <div className="text-[11px] font-bold text-cream/55 mb-2">{t("match.players")}</div>
-      <div className="space-y-1.5">
+    <div className="mt-3 sm:mt-4 text-start">
+      <div className="text-[11px] font-bold text-cream/55 mb-1.5">{t("match.players")}</div>
+      <div className="space-y-1">
         {seatPlayers.map((p, i) => {
           const isMe = p.id ? p.id === myId : !p.isBot;
           const canAdd = !!p.id && !p.isBot && p.id !== myId;
           return (
-            <div key={i} className="flex items-center gap-2.5 glass rounded-xl px-2.5 py-1.5">
+            <div key={i} className="flex items-center gap-2.5 glass rounded-xl px-2.5 py-1">
               {canAdd ? (
                 <button
                   onClick={() => viewProfile(p.id!)}
diff --git a/src/components/online/PostMatchRewardsModal.tsx b/src/components/online/PostMatchRewardsModal.tsx
index 4cdba41..b4826a4 100644
--- a/src/components/online/PostMatchRewardsModal.tsx
+++ b/src/components/online/PostMatchRewardsModal.tsx
@@ -83,7 +83,7 @@ export function PostMatchRewardsModal({
         initial={{ scale: 0.82, y: 28 }}
         animate={{ scale: 1, y: 0 }}
         transition={{ type: "spring", stiffness: 200, damping: 18 }}
-        className="glass rounded-3xl p-7 short:p-4 w-full max-w-sm landscape:max-w-md text-center relative max-h-[94dvh] overflow-y-auto overflow-x-hidden"
+        className="glass rounded-3xl p-4 sm:p-6 short:p-4 w-full max-w-sm landscape:max-w-md text-center relative max-h-[94dvh] overflow-y-auto overflow-x-hidden"
       >
         {/* radiating bg glow */}
         <div
@@ -98,13 +98,13 @@ export function PostMatchRewardsModal({
           initial={{ scale: 0, rotate: -20 }}
           animate={{ scale: 1, rotate: 0 }}
           transition={{ type: "spring", stiffness: 180, delay: 0.1 }}
-          className="text-6xl short:text-4xl mb-2 short:mb-0 relative"
+          className="text-5xl sm:text-6xl short:text-4xl mb-1 sm:mb-2 short:mb-0 relative"
         >
           {won ? "🏆" : "🎴"}
         </motion.div>
 
-        <h2 className="gold-text text-2xl short:text-xl font-black relative">{t("reward.title")}</h2>
-        <p className={"relative mt-1 font-bold text-lg short:text-base " + (won ? "text-teal-300" : "text-rose-300")}>
+        <h2 className="gold-text text-xl sm:text-2xl short:text-xl font-black relative">{t("reward.title")}</h2>
+        <p className={"relative mt-0.5 sm:mt-1 font-bold text-base sm:text-lg short:text-base " + (won ? "text-teal-300" : "text-rose-300")}>
           {won ? t("reward.win") : t("reward.lose")}
         </p>
 
@@ -114,9 +114,9 @@ export function PostMatchRewardsModal({
             initial={{ scale: 0.5, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             transition={{ type: "spring", stiffness: 200, damping: 14, delay: 0.18 }}
-            className="relative mt-4 short:mt-2 flex items-center justify-center gap-2"
+            className="relative mt-3 sm:mt-4 short:mt-2 flex items-center justify-center gap-2"
           >
-            <span className="text-5xl short:text-3xl font-black gold-text">
+            <span className="text-4xl sm:text-5xl short:text-3xl font-black gold-text">
               +<CountUp to={reward.coinsDelta} ms={1100} />
             </span>
             <motion.span
@@ -128,7 +128,7 @@ export function PostMatchRewardsModal({
           </motion.div>
         )}
 
-        <div className="relative mt-5 short:mt-3 space-y-2 short:space-y-1.5">
+        <div className="relative mt-3 sm:mt-4 short:mt-3 space-y-1.5 sm:space-y-2">
           {reward.ratingDelta !== 0 && (
             <RewardRow
               icon={reward.ratingDelta > 0
@@ -239,7 +239,7 @@ export function PostMatchRewardsModal({
 
         <MatchPlayersList />
 
-        <button onClick={onClose} className="relative press-3d btn-gold w-full rounded-xl py-3.5 mt-6 font-black text-base">
+        <button onClick={onClose} className="relative press-3d btn-gold w-full rounded-xl py-3 mt-4 sm:mt-5 font-black text-base">
           {t("reward.continue")}
         </button>
       </motion.div>