From 3e8aa260184e7146c7463ea8cccc617b0ede8943 Mon Sep 17 00:00:00 2001
From: SKINMAKER <me@skinmaker.dev>
Date: Sun, 19 Feb 2023 21:10:54 +0900
Subject: [PATCH] fix: bot / server card width (#537)

* fix: server card width

* fix: bot card width

* feat: set min width

* feat: adjust text size by screen

* feat: improve server card layout

* feat: improve bot card layout

* chore: remove unnecessary div
---
 components/BotCard.tsx    | 51 +++++++++++++++++++--------------------
 components/ServerCard.tsx | 47 ++++++++++++++++++------------------
 2 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/components/BotCard.tsx b/components/BotCard.tsx
index bb9fc6e..5a583b9 100644
--- a/components/BotCard.tsx
+++ b/components/BotCard.tsx
@@ -10,7 +10,7 @@ const Tag = dynamic(() => import('@components/Tag'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 
 const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
-	return	<div className='container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
+	return	<div className='min-w-0 container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
 		<div className='relative'>
 			<div className='container mx-auto'>
 				<div className='h-full'>
@@ -27,9 +27,9 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 					>
 						<Link href={makeBotURL(bot)}>
 							<div>
-								<div className='flex h-44'>
-									<div className='w-3/5'>
-										<div className='flex justify-start'>
+								<div className='flex flex-col'>
+									<div className='flex'>
+										<div className='w-3/5 flex justify-start'>
 											<DiscordAvatar
 												size={128}
 												userID={bot.id}
@@ -37,30 +37,29 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 												className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
 											/>
 										</div>
-
-										<div className='mt-28 px-4'>
-											<h2 className='px-1 text-sm'>
-												<i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
-												{Status[bot.status]?.text}
-											</h2>
-											<h1 className='mb-3 text-left text-2xl font-bold truncate'>{bot.name}</h1>
+										<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
+											<Tag
+												text={
+													<>
+														<i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)}
+													</>
+												}
+												dark
+											/>
+											<Tag
+												blurple
+												text={bot.servers ? <>{formatNumber(bot.servers)} 서버</> : 'N/A'}
+												dark
+											/>
 										</div>
 									</div>
-									<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
-										<Tag
-											text={
-												<>
-													<i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)}
-												</>
-											}
-											dark
-										/>
-										<Tag
-											blurple
-											text={bot.servers ? <>{formatNumber(bot.servers)} 서버</> : 'N/A'}
-											dark
-										/>
-									</div>
+								</div>
+								<div className='mt-3 px-4 h-16'>
+									<h2 className='px-1 text-sm'>
+										<i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
+										{Status[bot.status]?.text}
+									</h2>
+									<h1 className='mb-3 text-left text-xl sm:text-2xl font-bold truncate'>{bot.name}</h1>
 								</div>
 								<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font-medium'>
 									{bot.intro}
diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index e129949..568a731 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -11,7 +11,7 @@ const ServerIcon = dynamic(() => import('@components/ServerIcon'))
 
 const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 	const newServerLink = server.data ? `/addserver/${server.id}` : `${DiscordEnpoints.InviteApplication(DSKR_BOT_ID, {}, 'bot', null, server.id)}&disable_guild_select=true`
-	return	<div className='container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
+	return	<div className='min-w-0 container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
 		<div className='relative'>
 			<div className='container mx-auto'>
 				<div className='h-full'>
@@ -28,9 +28,9 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 					>
 						<Link href={type !== 'add' ? makeServerURL(server) : newServerLink}>
 							<div>
-								<div className='flex h-44'>
-									<div className='w-3/5'>
-										<div className='flex justify-start'>
+								<div className='flex flex-col'>
+									<div className='flex'>
+										<div className='w-3/5 flex justify-start'>
 											<ServerIcon
 												size={128}
 												id={server.id}
@@ -39,28 +39,27 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 												className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
 											/>
 										</div>
-									
-										<div className='mt-28 px-4'>
-											<h2 className={`px-1 text-sm ${server.state !== 'unreachable' ? ' invisible' : ''}`}>
-												<i className='fas fa-ban text-red-600' />정보 갱신 불가
-											</h2>
-											<h1 className='mb-3 text-left text-2xl font-bold truncate'>{server.name}</h1>
+										<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
+											<Tag
+												text={
+													<>
+														<i className='fas fa-heart text-red-600' /> {formatNumber(server.votes)}
+													</>
+												}
+												dark
+											/>
+											<Tag
+												blurple
+												text={server.members ? <>{formatNumber(server.members)} 멤버</> : 'N/A'}
+												dark
+											/>
 										</div>
 									</div>
-									<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
-										<Tag
-											text={
-												<>
-													<i className='fas fa-heart text-red-600' /> {formatNumber(server.votes)}
-												</>
-											}
-											dark
-										/>
-										<Tag
-											blurple
-											text={server.members ? <>{formatNumber(server.members)} 멤버</> : 'N/A'}
-											dark
-										/>
+									<div className='mt-3 px-4 h-16'>
+										<h2 className={`px-1 text-sm ${server.state !== 'unreachable' ? ' invisible' : ''}`}>
+											<i className='fas fa-ban text-red-600' />정보 갱신 불가
+										</h2>
+										<h1 className='mb-3 text-left text-xl sm:text-2xl font-bold truncate'>{server.name}</h1>
 									</div>
 								</div>