refactor: mobile friendly

public/index.html

@@ -127,6 +127,16 @@
       width: 100%;
       height: 100%;
     }
+    /* iOS safari */
+    @supports (-webkit-touch-callout: none) {
+      body {
+        height: -webkit-fill-available;
+      }
+      .h-screen {
+        height: -webkit-fill-available !important ;
+        overflow: auto;
+      }
+    }
     /* iframe 样式覆盖 */
     body.iframe {
       position: fixed;

src/common/component/InviteModal/index.tsx

@@ -25,7 +25,7 @@ const InviteModal: FC<Props> = ({ type = "server", cid, title = "", closeModal }
   const finalTitle = type == "server" ? server.name : `#${title || channel?.name}`;
   return (
     <Modal>
-      <div className="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 min-w-[408px]">
+      <div className="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4  md:min-w-[408px]">
         <h2 className="flex items-center justify-between text-lg text-gray-700 dark:text-gray-50 ">
           {t("invite_title", { name: finalTitle })}
           <CloseIcon className="cursor-pointer dark:fill-white" onClick={closeModal} />

src/common/component/StyledSettingContainer.tsx

@@ -32,7 +32,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
   return (
     <>
       <div className="w-screen h-screen flex">
-        <div className={clsx("h-screen w-full md:max-w-[212px] overflow-scroll px-4 py-8 bg-neutral-100 dark:bg-gray-800", nav && "hidden md:block")}>
+        <div className={clsx("h-full w-full overflow-y-scroll md:max-w-[212px] px-4 py-8 bg-neutral-100 dark:bg-gray-800", nav && "hidden md:block")}>
           <h2 onClick={closeModal} className="hidden md:flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
             <IconBack className="dark:fill-gray-400" /> {title}
           </h2>

src/routes/chat/GuestChannelChat/index.tsx

@@ -35,48 +35,46 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
   const { name, description, is_public } = data;
   const feeds = [...msgIds, ...appends];
   return (
-    <>
-      <Layout
-        readonly
-        to={cid}
-        context="channel"
-        header={
-          <header className="px-5 py-4 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
-            <GoBackNav />
-            <div className="flex items-center gap-1">
-              <ChannelIcon personal={!is_public} />
-              <span className="text-gray-800 dark:text-white">{name}</span>
-              <span className="ml-2 text-gray-500 hidden md:block ">{description}</span>
-            </div>
-          </header>
-        }
-      >
-        <>
-          {hasMore ? (
-            <LoadMore pullUp={pullUp} pulling={pulling} />
-          ) : (
-            <div className="pt-14 flex flex-col items-start gap-2">
-              <h2 className="font-bold text-4xl dark:text-white">{t("welcome_channel", { name })}</h2>
-              <p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name })} </p>
-            </div>
-          )}
-          {/* <div className="feed"> */}
-          {feeds.map((mid, idx) => {
-            const curr = messageData[mid];
-            if (!curr) return null;
-            const isFirst = idx == 0;
-            const prev = isFirst ? null : messageData[feeds[idx - 1]];
-            return renderMessageFragment({
-              readonly: true,
-              selectMode: false,
-              prev,
-              curr,
-              contextId: cid,
-              context: "channel"
-            });
-          })}
-        </>
-      </Layout>
-    </>
+    <Layout
+      readonly
+      to={cid}
+      context="channel"
+      header={
+        <header className="px-5 py-4 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
+          <GoBackNav />
+          <div className="flex items-center gap-1">
+            <ChannelIcon personal={!is_public} />
+            <span className="text-gray-800 dark:text-white">{name}</span>
+            <span className="ml-2 text-gray-500 hidden md:block ">{description}</span>
+          </div>
+        </header>
+      }
+    >
+      <>
+        {hasMore ? (
+          <LoadMore pullUp={pullUp} pulling={pulling} />
+        ) : (
+          <div className="pt-14 flex flex-col items-start gap-2">
+            <h2 className="font-bold text-4xl dark:text-white">{t("welcome_channel", { name })}</h2>
+            <p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name })} </p>
+          </div>
+        )}
+        {/* <div className="feed"> */}
+        {feeds.map((mid, idx) => {
+          const curr = messageData[mid];
+          if (!curr) return null;
+          const isFirst = idx == 0;
+          const prev = isFirst ? null : messageData[feeds[idx - 1]];
+          return renderMessageFragment({
+            readonly: true,
+            selectMode: false,
+            prev,
+            curr,
+            contextId: cid,
+            context: "channel"
+          });
+        })}
+      </>
+    </Layout>
   );
 }

src/routes/chat/Layout/index.tsx

@@ -2,16 +2,15 @@ import { useState, useRef, useEffect, FC, ReactElement } from "react";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import clsx from "clsx";
+
 import ImagePreviewModal from "../../../common/component/ImagePreviewModal";
 import Send from "../../../common/component/Send";
 import Operations from "./Operations";
 import useUploadFile from "../../../common/hook/useUploadFile";
-
 import { useAppSelector } from "../../../app/store";
 import LoginTip from "./LoginTip";
 import useLicense from "../../../common/hook/useLicense";
 import LicenseUpgradeTip from "./LicenseOutdatedTip";
-// import { useTranslation } from "react-i18next";
 import DnDTip from "./DnDTip";
 
 interface Props {

src/routes/chat/SessionList/index.tsx

@@ -66,7 +66,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
   ]);
   return (
     <>
-      <ul className="flex flex-col gap-0.5 p-2 overflow-auto h-[calc(100vh_-_56px_-_16px_-_8px)]">
+      <ul className="flex flex-col gap-0.5 p-2 overflow-auto">
         {sessions.map((s) => {
           const { key, type, id, mid = 0 } = s;
           return (

src/routes/chat/index.tsx

@@ -54,7 +54,7 @@ function ChatPage() {
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
-      <div className={clsx(`flex h-full md:pt-2 md:pb-2.5 md:pr-1`, isGuest ? "guest-container md:px-1" : "md:pr-12")}>
+      <div className={clsx(`flex h-screen md:h-full md:pt-2 md:pb-2.5 md:pr-1`, isGuest ? "guest-container md:px-1" : "md:pr-12")}>
         {sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
         <div className={clsx("left-container pb-14 md:pb-0 flex-col md:rounded-l-2xl w-full md:max-w-[250px] md:min-w-[268px] h-full shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
           isMainPath ? "flex" : "hidden md:flex"

src/routes/users/index.tsx

@@ -27,7 +27,7 @@ function UsersPage() {
   if (!users) return null;
   const isUserDetail = !!user_id;
   return (
-    <div className={clsx("flex h-full md:pt-2 md:pb-2.5 md:pr-12")}>
+    <div className={clsx("flex h-screen md:h-full md:pt-2 md:pb-2.5 md:pr-12")}>
       <div className={clsx("md:rounded-l-2xl bg-white dark:bg-gray-800 relative flex flex-col w-full md:w-auto md:min-w-[268px] shadow-[inset_-1px_0px_0px_rgba(0,_0,_0,_0.1)]",
         isUserDetail && "hidden"
       )}>