fix(ui): correct the dom elements' position

ui/components/EmptyChat.tsx

@@ -11,16 +11,19 @@ const EmptyChat = ({
   setFocusMode: (mode: string) => void;
 }) => {
   return (
-    <div className="relative flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
+    <div className="relative">
       <ThemeSwitcher size={17} className="absolute top-2 right-0 lg:hidden" />
-      <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
+
-        Research begins here.
+      <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
-      </h2>
+        <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
-      <EmptyChatMessageInput
+          Research begins here.
-        sendMessage={sendMessage}
+        </h2>
-        focusMode={focusMode}
+        <EmptyChatMessageInput
-        setFocusMode={setFocusMode}
+          sendMessage={sendMessage}
-      />
+          focusMode={focusMode}
+          setFocusMode={setFocusMode}
+        />
+      </div>
     </div>
   );
 };

ui/components/Navbar.tsx

@@ -49,9 +49,10 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
         <p className="text-xs">{timeAgo} ago</p>
       </div>
       <p className="hidden lg:flex">{title}</p>
-      <div className="flex flex-row items-center space-x-4">
-        <ThemeSwitcher size={17} className="lg:hidden" />
 
+      <ThemeSwitcher size={17} className="lg:hidden ml-auto mr-4" />
+
+      <div className="flex flex-row items-center space-x-4">
         <Share
           size={17}
           className="active:scale-95 transition duration-100 cursor-pointer"