KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: modal scrolling on small devices (#527) 

* fix: propmt side not showing on small devices

* added the robot icon while chat is loading

* fix: sidbar position

* fix: modal not scrolling on small devices

* fix: overlap between the modal and icons
This commit is contained in:
Syed Muzamil 2023-04-13 16:28:13 +05:30 committed by GitHub
parent 5ed5e156cd
commit f61e91d07f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/Chat/ChatLoader.tsx
View File

@ -1,3 +1,4 @@
import { IconRobot } from '@tabler/icons-react';
import { IconDots } from '@tabler/icons-react';
import { FC } from 'react';
@ -10,7 +11,9 @@ export const ChatLoader: FC<Props> = () => {
style={{ overflowWrap: 'anywhere' }}
>
<div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
<div className="min-w-[40px] text-right font-bold">AI:</div>
<div className="min-w-[40px] items-end">
<IconRobot size={30} />
</div>
<IconDots className="animate-pulse" />
</div>
</div>

2
components/Chat/VariableModal.tsx
View File

@ -83,7 +83,7 @@ export const VariableModal: FC<Props> = ({
>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">

4
components/Chatbar/components/PluginKeys.tsx
View File

@ -63,7 +63,7 @@ export const PluginKeys = () => {
className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
onKeyDown={handleEnter}
>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="fixed inset-0 z-10 overflow-hidden">
<div className="flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="hidden sm:inline-block sm:h-screen sm:align-middle"
@ -72,7 +72,7 @@ export const PluginKeys = () => {
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="mb-10 text-4xl">Plugin Keys</div>

6
components/Promptbar/components/PromptModal.tsx
View File

@ -51,10 +51,10 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
return (
<div
className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-100"
className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
onKeyDown={handleEnter}
>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="fixed inset-0 z-10 overflow-hidden">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="hidden sm:inline-block sm:h-screen sm:align-middle"
@ -63,7 +63,7 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="text-sm font-bold text-black dark:text-neutral-200">

2
components/Sidebar/Sidebar.tsx
View File

@ -57,7 +57,7 @@ const Sidebar = <T,>({
return isOpen ? (
<div>
<div
className={`fixed top-0 z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}
className={`fixed top-0 ${side}-0 z-40 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}
>
<div className="flex items-center">
<button