fix: fix layout according to screen size

Author: gautamgambhir97

components/chat/chat-window.tsx

@@ -51,16 +51,9 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ onClose }) => {
 
   return (
     <div className="nx-fixed nx-bottom-0 md:nx-bottom-3 nx-right-0 md:nx-right-3 nx-w-full nx-max-w-md dark:nx-bg-[#242630] nx-bg-[#F3F5F8] nx-shadow-xl nx-rounded-xl nx-z-[51] nx-pb-6">
-      <div className="nx-flex nx-justify-between nx-items-center dark:nx-bg-none nx-bg-gradient-to-b  nx-py-3 nx-from-[rgba(95,56,251,0.1)] nx-to-[rgba(208,234,255,0.1)] nx-rounded-xl nx-px-6">
-        <div className="tooltip">
-          <div className="nx-p-1 nx-bg-[#5f38fb] nx-font-normal nx-text-sm nx-rounded-md nx-text-white">
-            Beta
-          </div>
-          <div className="tooltip-text nx-p-2">
-            Our chat agent is in training, and results will improve with use
-          </div>
-        </div>
-        <button onClick={onClose} className="nx-text-[#000D3D]">
+      <div className="nx-flex nx-justify-between nx-items-center dark:nx-bg-none nx-bg-gradient-to-b nx-from-[rgba(95,56,251,0.1)] nx-to-[rgba(208,234,255,0.1)] nx-rounded-xl nx-px-6">
+        <h3 className="nx-text-lg nx-font-semibold"></h3>
+        <button onClick={onClose} className="nx-text-[#000D3D] nx-mt-6">
           &#x2715;
         </button>
       </div>

components/landing-page.tsx

@@ -315,7 +315,9 @@ function LandingPage() {
         </p>
         <Products />
       </section>
-      <ChatWithUs />
+      <div className="nx-hidden md:nx-flex">
+        <ChatWithUs />
+      </div>
     </section>
   );
 }

styles/globals.css

@@ -5472,28 +5472,14 @@ pre:not([data-theme]) {
   background-color: rgba(52, 52, 52, 0.08) !important;
 }
 
-.tooltip {
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.tooltip-text {
-  visibility: hidden;
-  width: 250px;
-  background-color: rgba(239, 244, 255, 1);
-  color: rgba(52, 55, 57, 1);
-  border-radius: 10px;
-  position: absolute;
-  bottom: 125%;
-  transform: translateX(-50%);
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.3s;
-  font-size: small;
+@media (max-width: 768px) {
+  .show-on-small {
+    display: block !important;
+  }
 }
 
-.tooltip:hover .tooltip-text {
-  visibility: visible;
-  opacity: 1;
-}
+@media (min-width: 769px) {
+  .show-on-small {
+    display: none !important;
+  }
+}

theme/fetch-ai-docs/components/sidebar.tsx

@@ -22,6 +22,7 @@ import { renderComponent } from "../utils";
 import { Anchor } from "./anchor";
 import { Collapse } from "./collapse";
 import { WITH_INDEXED_PAGES } from "../constants";
+import ChatWithUs from "components/chat/chat-with-us";
 
 const TreeState: Record<string, boolean> = Object.create(null);
 
@@ -74,6 +75,7 @@ function FolderImpl({ item, anchors }: FolderProps): ReactElement {
   const [route] = routeOriginal.split("#");
   const active = [route, route + "/"].includes(item.route + "/");
   const activeRouteInside = active || route.startsWith(item.route + "/");
+  const [isMobile, setIsMobile] = useState(false);
 
   const parentLevelRoute = route.split("/");
   const currentItemParentRoute = item.route.split("/");
@@ -135,16 +137,29 @@ function FolderImpl({ item, anchors }: FolderProps): ReactElement {
       };
     });
   }
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 1080);
+    };
+
+    handleResize(); // Initial check
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   const isLink = "withIndexPage" in item && item.withIndexPage;
   const ComponentToUse = isLink ? Anchor : "button";
   if (
     currentItemParentRoute[1] == parentLevelRoute[1] ||
     (parentLevelRoute[1] == "" && level == 1)
   ) {
+    console.log({ isMobile });
     return (
       <>
         <li className={cn({ open, active }, "nx-w-full")}>
-          {(!isLink || WITH_INDEXED_PAGES.includes(item.title)) && (
+          {(isMobile || !isLink || WITH_INDEXED_PAGES.includes(item.title)) && (
             <ComponentToUse
               id={`sidebar${item.route?.split("/").join("-").toLowerCase()}`}
               href={isLink ? item.route : undefined}
@@ -479,6 +494,9 @@ export function Sidebar({
               </div>
             </OnFocusItemContext.Provider>
           </FocusedItemContext.Provider>
+          <div className="show-on-small">
+            <ChatWithUs />
+          </div>
         </aside>
       </div>
     </>

theme/fetch-ai-docs/index.tsx

@@ -178,7 +178,9 @@ const Body = ({
             headings: structuredHeadings,
           })}
       </article>
-      <ChatWithUs />
+      <div className="nx-hidden md:nx-flex">
+        <ChatWithUs />
+      </div>
     </>
   );
 };