fix: different height for frame width

frontend/pages/chat.js

@@ -20,14 +20,8 @@ import { initializeWebSocketConnection } from "../services/api/api";
 import { useRouter } from "next/router";
 import notif from "../assets/sounds/notif.mp3";
 import notifRecieve from "../assets/sounds/notif-recieve.mp3";
-import { AiFillAccountBook } from "react-icons/ai";
-import { AiFillCamera } from "react-icons/ai";
-// import boxData from "../services/utilities/box-data";
-import { BsStarFill } from "react-icons/bs";
-import slack from ".././assets/slack.svg";
-import mail from ".././assets/mail.svg";
-import logo from "../assets/logo.svg";
-import Mail from "../components/mail";
+import useIsInIframe from "../services/utilities/useInFrame";
+
 
 import { ChatNavbar } from "../components/chatNavbar";
 
@@ -251,9 +245,12 @@ export default function Home() {
     localStorage.setItem("chatType", "chatbot"); // write logic to display bot popup
   };
 
+  const isInIframe = useIsInIframe();
+
+
   return (
     <>
-      <div className="main text-slate-950 bg-white w-full bg-contain">
+      <div className={`main text-slate-950 bg-white w-full bg-contain ${isInIframe ? "mt-8" : "mt-0"}`}>
         <div className="grid grid-cols-24 w-full h-[98vh] mt-2">
           <div className="flex flex-col items-center col-span-7 bg-white max-md:hidden">
             <div className="flex flex-col items-center p-2 bg-white-primary rounded-xl w-[95%]">

frontend/pages/chat_bot.js

@@ -33,6 +33,8 @@ import Mail from "../components/mail";
 import ChatbotContainer from "../components/chatbotContainer";
 import { leaveChat } from "../services/api/leaveChatApi";
 import { useRouter } from "next/router";
+import useIsInIframe from "../services/utilities/useInFrame";
+
 
 import { ChatbotNavbar } from "../components/chatbotNavbar";
 
@@ -224,9 +226,11 @@ export default function Home() {
     };
   }, [router]);
 
+  const isInIframe = useIsInIframe();
+
   return (
     <>
-      <div className="main text-slate-950 bg-white w-full bg-contain ">
+      <div className={`main text-slate-950 bg-white w-full bg-contain ${isInIframe ? "mt-8" : "mt-0"}`}>
         <div className="grid grid-cols-24 w-full h-[98vh] mt-2">
           <div className="justify-between col-span-7 bg-white rounded-r-xl max-md:hidden">
             <div className="flex flex-col items-center p-2 bg-white-primary rounded-xl w-[95%]">

frontend/pages/index.js

@@ -19,6 +19,7 @@ import ChatBot from "../assets/chatbot.svg";
 import SlackLogo from "../assets/slack.svg";
 import LoginModal from "../components/loginModal";
 import ChatBotLoginModal from "../components/chatbotLoginModal";
+import useIsInIframe from "../services/utilities/useInFrame";
 export default function Home() {
   const router = useRouter();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -55,9 +56,11 @@ export default function Home() {
     openChatBotModal();
   };
 
+  const isInIframe = useIsInIframe();
+
   return (
     <>
-      <div className="main bg-white w-full bg-contain">
+      <div className={`main bg-white w-full bg-contain ${isInIframe ? "mt-8" : "0"}`}>
         <div className="grid grid-cols-24 w-full mt-2 h-[95vh]">
           <div className="flex flex-col items-center col-span-7 bg-white max-md:hidden">
             <div className="flex flex-col items-center p-2 bg-white-primary rounded-xl w-[95%]">

frontend/pages/private_chat.js

@@ -30,6 +30,8 @@ import mail from ".././assets/mail.svg";
 import logo from "../assets/logo.svg";
 import Mail from "../components/mail";
 import { ChatNavbar } from "../components/chatNavbar";
+import useIsInIframe from "../services/utilities/useInFrame";
+
 
 export default function Home() {
   const [messages, setMessages] = useState([]);
@@ -246,9 +248,11 @@ export default function Home() {
     };
   }, [router]);
 
+  const isInFrame = useIsInIframe();
+
   return (
     <>
-      <div className="main text-slate-950 bg- w-full h-screen bg-contain">
+      <div className={`main text-slate-950 bg- w-full h-screen bg-contain ${isInFrame ? "mt-8" : "mt-0"}`}>
         <div className="grid grid-cols-24 w-full h-[98vh] mt-2">
           <div className="justify-between flex flex-col items-center col-span-7 bg-white max-md:hidden">
             <div className="flex flex-col items-center p-2 bg-white-primary rounded-xl w-[95%]">

frontend/services/utilities/useInFrame.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+const useIsInIframe = () => {
+  const [isInIframe, setIsInIframe] = useState(false);
+
+  useEffect(() => {
+    setIsInIframe(window !== window.parent);
+  }, []);
+
+  return isInIframe;
+};
+
+export default useIsInIframe;