fix: Mobile UI fixes

Author: Vikasg7

client/app/components/ChatHeader.tsx

@@ -45,7 +45,7 @@ export function ChatHeader({
   }, []);
 
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--color-elevated)] transition-colors relative">
+    <div className="flex items-center justify-between px-3 md:px-6 py-3 border-b border-[var(--border-subtle)] bg-[var(--color-elevated)] transition-colors relative">
       <div className="flex flex-col min-w-0">
         <div className="flex items-center gap-3">
           <div className="text-h6 font-bold tracking-tight text-[var(--text-primary)] truncate leading-none">{roomName}</div>

client/app/components/GlobalHeader.tsx

@@ -41,7 +41,7 @@ export default function GlobalHeader({ onMenuClick }: GlobalHeaderProps) {
   }, []);
 
   return (
-    <header className="app-header z-50 px-6 relative">
+    <header className="app-header z-50 px-3 md:px-6 relative">
       <div className="flex items-center gap-4">
         {/* Mobile Menu Button */}
         <button

client/app/components/MsgList.tsx

@@ -99,7 +99,7 @@ export function MessageList({
   return (
     <div
       ref={scrollRef}
-      className="flex-1 overflow-y-auto overflow-x-hidden px-4 pb-4 space-y-0 bg-[var(--color-base)] scroll-thin min-w-0"
+      className="flex-1 overflow-y-auto overflow-x-hidden px-2 md:px-4 pb-4 space-y-0 bg-[var(--color-base)] scroll-thin min-w-0"
     >
       {messages.length === 0 ? (
         loadingMore ? (
@@ -157,15 +157,15 @@ export function MessageList({
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -10 }}
                   transition={{ duration: 0.15 }}
-                  className={`group flex items-start gap-2.5 w-full ${mine ? 'flex-row-reverse pl-6 md:pl-20' : 'flex-row pr-6 md:pr-20'} ${marginClass}`}
+                  className={`group flex items-start gap-1 w-full py-1.5 px-0 md:px-0 ${mine ? 'flex-row-reverse' : 'flex-row'} ${marginClass}`}
                 >
                   {/* Time Marker - Only show for first in group */}
                   <div className={`w-6 flex-shrink-0 text-[10px] text-[var(--text-muted)] font-medium pt-2 ${mine ? 'text-left' : 'text-right'}`}>
                     {isFirstInGroup && format.time(m.createdAt)}
                   </div>
 
                   {/* Message Content Container */}
-                  <div className={`flex flex-col ${mine ? 'items-end' : 'items-start'} max-w-[85%] sm:max-w-[70%] lg:max-w-[60%]`}>
+                  <div className={`flex flex-col ${mine ? 'items-end' : 'items-start'} max-w-[calc(100%-140px)] sm:max-w-[70%] lg:max-w-[60%]`}>
                     <div
                       id={`msg-${m.id}`}
                       onClick={() => {

client/app/globals.css

@@ -142,15 +142,6 @@ body {
   box-shadow: var(--shadow-soft);
 }
 
-@media (max-width: 768px) {
-  .group.flex.items-start.w-full {
-    padding-left: 1.5rem !important;
-    /* pl-6 */
-    padding-right: 1.5rem !important;
-    /* pr-6 */
-  }
-}
-
 .prose-constrained {
   max-width: 60ch;
   /* line length comfort */