fix: padding and alignment fixes

src/components/PageComponents/Messages/MessageItem.tsx

@@ -101,7 +101,7 @@ export const MessageItem = ({ message }: MessageProps) => {
   const isFailed = message.state === MessageState.Failed;
 
   const messageItemWrapperClass = cn(
-    "group w-full px-2 py-2 relative list-none",
+    "group w-full py-2 relative list-none",
     "rounded-md",
     "hover:bg-slate-300/15 dark:hover:bg-slate-600/20",
     "transition-colors duration-100 ease-in-out",

src/components/UI/Footer.tsx

@@ -7,7 +7,7 @@ type FooterProps = {
 const Footer = ({ className, ...props }: FooterProps) => {
   return (
     <footer
-      className={cn("flex mt-auto justify-center p-2 text-sm lg:text-md", className)}
+      className={cn("flex mt-auto justify-center py-2 px-4 text-sm lg:text-md", className)}
       {...props}
     >
       <p>

src/pages/Messages.tsx

@@ -172,7 +172,7 @@ export const MessagesPage = () => {
       <div className="flex flex-1 flex-col overflow-hidden">
         {renderChatContent()}
 
-        <div className="flex-none dark:bg-slate-900 p-4">
+        <div className="flex-none dark:bg-slate-900 p-2">
           {(isBroadcast || isDirect) ? (
             <MessageInput
               to={isDirect ? activeChat : MessageType.Broadcast}