refactor: new mobile layout

src/routes/chat/Layout/LoginTip.tsx

@@ -1,13 +1,16 @@
 // import { useEffect } from "react";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { resetAuthData } from "../../../app/slices/auth.data";
 import Button from "../../../common/component/styled/Button";
 import useLogout from "../../../common/hook/useLogout";
-// type Props = {};
+type Props = {
+  placement?: "session" | "chat"
+};
 
-const LoginTip = () => {
+const LoginTip = ({ placement = "chat" }: Props) => {
   const { t } = useTranslation("welcome");
   const { t: ct } = useTranslation();
   const dispatch = useDispatch();
@@ -20,8 +23,10 @@ const LoginTip = () => {
   };
 
   return (
-    <div className="flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4">
-      <span className="text-xs md:text-base text-[#98a2b3] dark:text-gray-100">
+    <div className={clsx("flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4 border border-solid border-gray-200 dark:border-gray-500",
+      placement == "session" && "w-[96%] md:hidden fixed bottom-2 left-1/2 -translate-x-1/2"
+    )}>
+      <span className="text-xs md:text-base text-gray-400 dark:text-gray-100">
         <i className="mr-2 text-xs md:text-lg ">👋</i>
         {t("sign_in_tip")}
       </span>

src/routes/chat/Layout/index.tsx

@@ -111,7 +111,7 @@ const Layout: FC<Props> = ({
         <main className="h-full w-full flex items-start justify-between relative" ref={messagesContainer}>
           <div className="rounded-br-2xl w-full flex flex-col h-[calc(100vh_-_56px_-_18px)]">
             {children}
-            <div className={`p-4 pt-0 ${selects ? "selecting" : ""}`}>
+            <div className={`px-2 py-0 md:p-4  ${selects ? "selecting" : ""}`}>
               {readonly ? (
                 <LoginTip />
               ) : reachLimit ? (