refactor: mobile UX friendly

src/routes/chat/ChannelChat/index.tsx

@@ -136,7 +136,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
             <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">{description}</span>
+              <span className="ml-2 text-gray-500 hidden md:block">{description}</span>
             </div>
           </header>
         }
@@ -164,7 +164,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           </div>
         }
       >
-        <article className="py-4.5 px-4 w-full h-full overflow-x-hidden overflow-y-auto" id={`VOCECHAT_FEED_channel_${cid}`}>
+        <article className="py-4.5 px-1 md:px-4 w-full h-full overflow-x-hidden overflow-y-auto" id={`VOCECHAT_FEED_channel_${cid}`}>
           {hasMore ? (
             <LoadMore pullUp={pullUp} pulling={pulling} />
           ) : (

src/routes/chat/GuestSessionList/index.tsx

@@ -40,7 +40,7 @@ const SessionList: FC<Props> = () => {
   }, [channelIDs, channelMessage, readChannels, readUsers, loginUid, userMessage]);
 
   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 h-[calc(100vh_-_56px_-_38px)]">
       {sessions.map((s) => {
         const { key, id, mid = 0 } = s;
         return <Session key={key} id={id} mid={mid} />;