feat: improve chat UI by adjusting padding and max-width for better layout #deploy

Author: myselfshravan

src/components/Header.jsx

@@ -146,7 +146,7 @@ function DesktopNavigation(props) {
         <NavItem href="noterepbot">AI Chat Bot</NavItem>
         <NavItem href="chat">Live Chat</NavItem>
         <NavItem href="communilink">CommuniLink</NavItem>
-        <NavItem href="links">Other Links</NavItem>
+        <NavItem href="links">Links</NavItem>
         <NavItem_External href="https://myselfshravan.github.io">
           Developer
         </NavItem_External>

src/pages/chat.jsx

@@ -97,7 +97,7 @@ function ChatProvider({ children }) {
 function ChatRoomList({ rooms, activePageUsers }) {
   const router = useRouter()
   return (
-    <div className="w-full border-b border-gray-300 bg-gradient-to-r from-blue-50 to-indigo-50 p-3 dark:border-gray-700 dark:from-blue-900 dark:to-indigo-900">
+    <div className="w-full border-b border-gray-300 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 dark:border-gray-700 dark:from-blue-900 dark:to-indigo-900">
       <div className="mb-2 flex items-center justify-between">
         <h2 className="text-lg font-bold text-gray-900 dark:text-white">
           NoteRep Chat Rooms
@@ -188,7 +188,7 @@ export default function Chat() {
       <main className="flex min-h-screen flex-col bg-indigo-50 dark:bg-gray-900">
         <CompactHeader />
         <section className="flex h-screen flex-col py-3 sm:py-10">
-          <div className="container mx-auto flex flex-1 flex-col p-4">
+          <div className="container mx-auto flex flex-1 flex-col p-4 max-w-5xl">
             <h1 className="mb-6 text-center text-3xl font-bold text-gray-900 dark:text-white">
               NoteRep Live Chat
             </h1>

src/pages/chat/[id].jsx

@@ -309,7 +309,7 @@ export default function ChatRoom() {
       <main className="flex min-h-screen flex-col bg-indigo-50 dark:bg-gray-900">
         <CompactHeader />
         <section className="flex h-screen flex-col py-3 sm:py-10">
-          <div className="container mx-auto flex flex-1 flex-col p-4">
+          <div className="container mx-auto flex max-w-5xl flex-1 flex-col p-4">
             <h1 className="mb-6 text-center text-3xl font-bold text-gray-900 dark:text-white">
               NoteRep Live Chat
             </h1>
@@ -323,7 +323,7 @@ export default function ChatRoom() {
                   sendMessage,
                 }) => (
                   <div className="flex h-[85vh] flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-gray-800">
-                    <div className="w-full border-b border-gray-300 bg-gradient-to-r from-blue-50 to-indigo-50 p-3 dark:border-gray-700 dark:from-blue-900 dark:to-indigo-900">
+                    <div className="w-full border-b border-gray-300 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 dark:border-gray-700 dark:from-blue-900 dark:to-indigo-900">
                       <div className="mb-2 flex items-center justify-between">
                         <h2 className="text-lg font-bold text-gray-900 dark:text-white">
                           {currentRoom ? currentRoom.name : 'Loading...'}
@@ -337,7 +337,7 @@ export default function ChatRoom() {
                           </p>
                           <button
                             onClick={() => router.push('/chat')}
-                            className="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                            className="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
                           >
                             Back to Rooms
                           </button>