Profile Page Mobile Ready

frontend-next/src/app/user/[stub]/page.js

@@ -91,14 +91,14 @@ function UserProfile({ params }) {
   return (
     <div>
       {isAuthenticated && (
-        <div className="overflow-hidden">
+        <div className="md:overflow-hidden">
           {/* Left Side of Page */}
-          <div className="h-dvh overflow-hidden">
+          <div className="h-dvh md:overflow-hidden">
             {/* Header */}
             <Header user={user} />
             {/* Main Page Section */}
-            <div className="grid grid-cols-3 mr-2 h-[calc(100%-110px)] pl-5 pr-5 pt-2">
-              <div className="cols-span-1 bg-white shadow-2xl rounded-xl pt-5">
+            <div className="md:grid md:grid-cols-3 mr-2 h-[calc(100%-110px)] pl-5 pr-5 pt-2 max-md:mb-10">
+              <div className="cols-span-1 bg-white shadow-2xl rounded-xl pt-5 max-md:pb-5">
                 {!isEditing && (
                   <div>
                     <img
@@ -142,7 +142,7 @@ function UserProfile({ params }) {
                 )}
               </div>
               <div className="col-span-2">
-                <div className="grid grid-cols-3 gap-y-1 pl-5 gap-1 h-[100%] w-[100%]">
+                <div className="grid md:grid-cols-3 max-md:grid-cols-1 max-md:mt-5 md:pl-5 justify-items-center gap-y-5 gap-1 h-[100%] w-[100%]">
                   {userRoomsArray}
                 </div>
               </div>

frontend-next/src/components/app/header.js

@@ -86,7 +86,8 @@ export function Header({mainTab,chatRoomObj,user,}) {
     <div className="flex m-2 rounded-lg h-[63px] bg-white shadow-2xl p-1">
       <div className="flex shrink h-[60px]">
         <Link href="/app">
-          <img src="/logos/logo_transparent_inverse.png" className="h-[60px]" />
+          <img src="/logos/logo_transparent_inverse.png" className="h-[60px] max-md:hidden" />
+          <img src="/logos/icon.png" className="h-[50px] mt-[5px] mb-[5px] md:hidden" />
         </Link>
       </div>
       <div className="grow grid grid-rows-1 grid-flow-col auto-cols-max justify-end gap-2 h-[60px] p-2">

frontend-next/src/components/app/notifications/notifications.js

@@ -86,7 +86,7 @@ export function NotificationPanel({user}) {
             </div>
           </Popover.Button>
 
-          <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl w-64 right-[0px]">
+          <Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl w-64 md:right-[0px] max-md:right-[-300%]">
             <div className="grid grid-cols-1">
               {isNotifications && notificationsMap}
               {!isNotifications &&