From 4b28b1eb8ee6177a8009b89ac2200b3b753bc5b1 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 21 Mar 2025 10:55:10 +0900
Subject: feat(frontend): support mobile layout

---
 .../GolfWatchApps/GolfWatchAppGaming1v1.tsx        | 34 ++++++++++++++--------
 1 file changed, 22 insertions(+), 12 deletions(-)

(limited to 'frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx')

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index ce12dca..a17b301 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -66,18 +66,20 @@ export default function GolfWatchAppGaming1v1({
 	return (
 		<div className="min-h-screen bg-gray-100 flex flex-col">
 			<div className={`text-white ${topBg} grid grid-cols-3 px-4 py-2`}>
-				<div className="font-bold flex justify-between my-auto">
+				<div className="font-bold flex gap-4 justify-start md:justify-between items-center my-auto">
 					<div className="flex gap-6 items-center">
-						{playerProfileA?.iconPath && (
+						{playerProfileB?.iconPath && (
 							<UserIcon
-								iconPath={playerProfileA.iconPath}
-								displayName={playerProfileA.displayName}
+								iconPath={playerProfileB.iconPath}
+								displayName={playerProfileB.displayName}
 								className="w-12 h-12 my-auto"
 							/>
 						)}
-						<div className="text-4xl">{playerProfileA?.displayName}</div>
+						<div className="hidden md:block text-4xl">
+							{playerProfileB?.displayName}
+						</div>
 					</div>
-					<div className="text-6xl">{scoreA}</div>
+					<div className="text-2xl md:text-6xl">{scoreB}</div>
 				</div>
 				<div className="font-bold text-center">
 					<div className="text-gray-100">{gameDisplayName}</div>
@@ -93,10 +95,12 @@ export default function GolfWatchAppGaming1v1({
 						<LeftTime sec={leftTimeSeconds} />
 					)}
 				</div>
-				<div className="font-bold flex justify-between my-auto">
-					<div className="text-6xl">{scoreB}</div>
+				<div className="font-bold flex gap-4 justify-end md:justify-between items-center my-auto">
+					<div className="text-2xl md:text-6xl">{scoreB}</div>
 					<div className="flex gap-6 items-center text-end">
-						<div className="text-4xl">{playerProfileB?.displayName}</div>
+						<div className="hidden md:block text-4xl">
+							{playerProfileB?.displayName}
+						</div>
 						{playerProfileB?.iconPath && (
 							<UserIcon
 								iconPath={playerProfileB.iconPath}
@@ -114,21 +118,27 @@ export default function GolfWatchAppGaming1v1({
 				bgB="bg-purple-400"
 			/>
 			<ThreeColumnLayout>
-				<TitledColumn title={<SubmitStatusLabel status={statusA} />}>
+				<TitledColumn
+					title={<SubmitStatusLabel status={statusA} />}
+					className="order-2 md:order-1"
+				>
 					<FoldableBorderedContainerWithCaption
 						caption={`コードサイズ: ${codeSizeA}`}
 					>
 						<CodeBlock code={codeA} language="php" />
 					</FoldableBorderedContainerWithCaption>
 				</TitledColumn>
-				<TitledColumn title={problemTitle}>
+				<TitledColumn title={problemTitle} className="order-1 md:order-2">
 					<ProblemColumnContent
 						description={problemDescription}
 						sampleCode={sampleCode}
 					/>
 					<RankingTable />
 				</TitledColumn>
-				<TitledColumn title={<SubmitStatusLabel status={statusB} />}>
+				<TitledColumn
+					title={<SubmitStatusLabel status={statusB} />}
+					className="order-3"
+				>
 					<FoldableBorderedContainerWithCaption
 						caption={`コードサイズ: ${codeSizeB}`}
 					>
-- 
cgit v1.2.3-70-g09d2