Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 02:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

style: hide footer in mobile mode

Browse source 
style: avoid ui overflow in mobile mode
This commit is contained in:
Wentao Lyu 2023-03-18 00:29:34 +08:00
parent e11ce141d7
commit 7372b37fe6
5 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Main/Footer.jsx
View file

@ -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"

2
client/src/components/Main/Landing.jsx
View file

@ -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

4
client/src/components/Main/TextChat.jsx
View file

@ -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 ? (

2
client/src/components/Messages/index.jsx
View file

@ -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}
>

2
client/src/components/Nav/MobileNav.jsx
View file

@ -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"