refactor: mobile friendly

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>