style call list page

app/messages/components/conversations-list.tsx

@@ -17,7 +17,7 @@ export default function ConversationsList() {
 			{Object.values(conversations).map(({ recipient, formattedPhoneNumber, messages }) => {
 				const lastMessage = messages[messages.length - 1]!;
 				return (
-					<li key={recipient} className="py-2 p-4">
+					<li key={`sms-conversation-${recipient}`} className="py-2 px-4">
 						<Link href={Routes.ConversationPage({ recipient })}>
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">

app/messages/pages/messages.tsx

@@ -23,7 +23,7 @@ const Messages: BlitzPage = () => {
 
 	return (
 		<>
-			<div className="flex flex-col space-y-6 p-6">
+			<div className="flex flex-col space-y-6 p-3">
 				<h2 className="text-3xl font-bold">Messages</h2>
 			</div>
 			<Suspense fallback="Loading...">