From 7372b37fe6f00d4d54a3082935118fe72887c8d3 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Sat, 18 Mar 2023 00:29:34 +0800
Subject: [PATCH] style: hide footer in mobile mode style: avoid ui overflow in
 mobile mode

---
 client/src/components/Main/Footer.jsx    | 2 +-
 client/src/components/Main/Landing.jsx   | 2 +-
 client/src/components/Main/TextChat.jsx  | 4 ++--
 client/src/components/Messages/index.jsx | 2 +-
 client/src/components/Nav/MobileNav.jsx  | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Main/Footer.jsx b/client/src/components/Main/Footer.jsx
index 21e6fff89a..0015596749 100644
--- a/client/src/components/Main/Footer.jsx
+++ b/client/src/components/Main/Footer.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Footer() {
   return (
-    <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+    <div className="hidden md:block px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-4">
       <a
         href="https://github.com/danny-avila/chatgpt-clone"
         target="_blank"
diff --git a/client/src/components/Main/Landing.jsx b/client/src/components/Main/Landing.jsx
index 5946551716..d0df6d708f 100644
--- a/client/src/components/Main/Landing.jsx
+++ b/client/src/components/Main/Landing.jsx
@@ -26,7 +26,7 @@ export default function Landing({ title }) {
   };
 
   return (
-    <div className="flex h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
+    <div className="flex pt-10 md:pt-0 h-full flex-col items-center overflow-y-auto text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
         <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold md:mt-[20vh] sm:mb-16">
           ChatGPT Clone
diff --git a/client/src/components/Main/TextChat.jsx b/client/src/components/Main/TextChat.jsx
index 8d7db4e71a..cf5d83132f 100644
--- a/client/src/components/Main/TextChat.jsx
+++ b/client/src/components/Main/TextChat.jsx
@@ -314,8 +314,8 @@ export default function TextChat({ messages }) {
   };
 
   return (
-    <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white pt-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent">
-      <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
+    <div className="input-panel fixed md:absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:dark:bg-transparent md:bg-transparent dark:md:bg-vert-dark-gradient py-2">
+      <form className="stretch mx-2 flex flex-row gap-3 md:pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
         <div className="relative flex h-full flex-1 md:flex-col">
           <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
             {isSubmitting ? (
diff --git a/client/src/components/Messages/index.jsx b/client/src/components/Messages/index.jsx
index 28b2fbfeda..114096b2fe 100644
--- a/client/src/components/Messages/index.jsx
+++ b/client/src/components/Messages/index.jsx
@@ -63,7 +63,7 @@ export default function Messages({ messages, messageTree }) {
 
   return (
     <div
-      className="flex-1 overflow-y-auto "
+      className="flex-1 overflow-y-auto pt-10 md:pt-0"
       ref={scrollableRef}
       onScroll={debouncedHandleScroll}
     >
diff --git a/client/src/components/Nav/MobileNav.jsx b/client/src/components/Nav/MobileNav.jsx
index 0c846524fc..558c88f1a4 100644
--- a/client/src/components/Nav/MobileNav.jsx
+++ b/client/src/components/Nav/MobileNav.jsx
@@ -23,7 +23,7 @@ export default function MobileNav({ setNavVisible }) {
   }
 
   return (
-    <div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
+    <div className="fixed top-0 left-0 right-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
       <button
         type="button"
         className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"