fix: styles (#300)

okisdev · Apr 14, 2024 · 890d3c2 · 890d3c2
1 parent 0eb9074
commit 890d3c2
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 16 deletions.
diff --git a/app/[locale]/(home)/search/page.tsx b/app/[locale]/(home)/search/page.tsx
@@ -11,15 +11,15 @@ export const dynamic = 'force-dynamic';
 
 export default function Search() {
     return (
-        <main className='m-3 flex h-screen flex-1 flex-col rounded-lg bg-white/70 p-1 shadow dark:bg-neutral-600/30 dark:text-neutral-200/70'>
+        <main className='m-2 flex h-screen flex-1 flex-col rounded-lg bg-white/70 p-1 shadow dark:bg-neutral-600/30 dark:text-neutral-200/70 md:m-3'>
             <div className='flex items-center justify-between rounded-md bg-transparent'>
                 <div className='flex items-center space-x-1 p-2'>
                     <AddButton />
                     <ModelSelect />
                     <SearchSelect />
                 </div>
             </div>
-            <div className='container mx-auto w-full overflow-scroll md:w-10/12'>
+            <div className='container w-full overflow-scroll md:mx-auto md:w-10/12'>
                 <SearchWindow />
             </div>
         </main>

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -9,7 +9,7 @@ export default function LocaleLayout({
 }>) {
     return (
         <LocaleProvider>
-            <body className='relative z-0 flex size-full min-h-screen overflow-scroll bg-slate-50 dark:bg-[#222] dark:text-[#eee]'>{children}</body>
+            <body className='relative z-0 flex size-full max-h-screen min-h-screen flex-1 overflow-hidden bg-slate-50 dark:bg-[#222] dark:text-[#eee]'>{children}</body>
         </LocaleProvider>
     );
 }
diff --git a/components/layout/message.tsx b/components/layout/message.tsx
@@ -17,7 +17,7 @@ export const renderMarkdownMessage = (content: string, hightlight?: string, setH
             rehypePlugins={[rehypeKatex]}
             components={{
                 p: ({ children, ...props }: any) => (
-                    <div className='my-2' {...props}>
+                    <div className='my-2 text-sm md:text-base' {...props}>
                         {children}
                     </div>
                 ),
@@ -89,7 +89,7 @@ export const renderMarkdownMessage = (content: string, hightlight?: string, setH
                     </code>
                 ),
                 img: ({ children, ...props }: any) => (
-                    <div className='container relative mx-auto w-1/2'>
+                    <div className='container relative mx-auto w-full md:w-1/2'>
                         <img className='container mx-auto' {...props} />
                         <button
                             className='absolute bottom-0 right-3 rounded-md bg-neutral-200 p-2 transition duration-200 ease-in-out hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-200/90 dark:shadow-lg dark:hover:bg-neutral-700 dark:hover:shadow-xl'

diff --git a/components/layout/search/block/images.tsx b/components/layout/search/block/images.tsx
@@ -6,6 +6,7 @@ import { useTranslations } from 'next-intl';
 
 import { LightBox } from '@/components/layout/lightbox';
 import { BlockTitle } from '@/components/layout/search/block/block-title';
+import { useMediaQuery } from '@/hooks/window';
 
 export const Images = ({ images, query }: { images: string[]; query?: string }) => {
     const t = useTranslations();
@@ -16,8 +17,10 @@ export const Images = ({ images, query }: { images: string[]; query?: string })
 
     const [isAllResources, setIsAllResources] = useState<boolean>(false);
 
-    const shown = isAllResources ? images : images.slice(0, 4);
-    const hidden = isAllResources ? [] : images.slice(4);
+    const isDesktop = useMediaQuery('(min-width: 768px)');
+
+    const shown = isAllResources ? images : isDesktop ? images.slice(0, 4) : images.slice(0, 3);
+    const hidden = isAllResources ? [] : isDesktop ? images.slice(4) : images.slice(3);
 
     const hiddenCount = hidden.length;
 
@@ -39,7 +42,7 @@ export const Images = ({ images, query }: { images: string[]; query?: string })
             {!images || images.length === 0 ? (
                 <div>{t('no_image_found')}</div>
             ) : (
-                <div className='flex flex-wrap gap-2'>
+                <div className='flex flex-wrap gap-1 md:gap-2'>
                     <LightBox
                         images={lightBoxImages.map((image) => ({ alt: image.alt || '', src: image.src }))}
                         open={open}
@@ -48,7 +51,7 @@ export const Images = ({ images, query }: { images: string[]; query?: string })
                         setCurrentIndex={setSelectedIndex}
                     />
                     {shown.map((image: string, index: number) => (
-                        <button key={index} className='relative aspect-video w-3/12 cursor-pointer' onClick={() => onClickOnImage(index)}>
+                        <button key={index} className='relative aspect-video w-1/3 cursor-pointer' onClick={() => onClickOnImage(index)}>
                             {image ? (
                                 <img src={image} alt={query} className='size-full rounded-md object-cover transition-opacity duration-200 ease-in-out hover:opacity-80 hover:zoom-in-100' />
                             ) : (
@@ -78,7 +81,7 @@ export const Images = ({ images, query }: { images: string[]; query?: string })
                         </button>
                     ) : (
                         <button
-                            className='h-auto w-3/12 cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:bg-neutral-800/70 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200/90'
+                            className='size-auto cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:bg-neutral-800/70 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200/90 md:w-3/12'
                             onClick={() => setIsAllResources(false)}
                         >
                             <p className='truncate text-xs text-neutral-800/50 dark:text-neutral-200/70'>{t('show_less_images')}</p>

diff --git a/components/layout/search/block/related.tsx b/components/layout/search/block/related.tsx
@@ -67,11 +67,10 @@ export const Related = ({ relatedQueries }: { relatedQueries: TIllustrator }) =>
                         <button
                             key={index}
                             type='submit'
-                            name={'related_query'}
                             value={item?.query}
                             className='flex w-full items-center space-x-2 rounded-md bg-neutral-100 px-2 py-1 text-left text-sm font-medium text-neutral-600 shadow-sm transition-colors duration-500 ease-in-out hover:bg-neutral-200 hover:text-neutral-700 hover:shadow-md hover:ring-2 hover:ring-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-600 dark:hover:text-neutral-100 dark:hover:ring-neutral-500 dark:focus-visible:ring-neutral-500'
                         >
-                            <LuPlus />
+                            <LuPlus className='size-auto min-w-5' />
                             <p className='text-sm font-medium'>{item?.query}</p>
                         </button>
                     ))}

diff --git a/components/layout/search/block/sources.tsx b/components/layout/search/block/sources.tsx
@@ -9,6 +9,7 @@ import { useTranslations } from 'next-intl';
 import { BlockTitle } from '@/components/layout/search/block/block-title';
 import { UserAvatar } from '@/components/layout/user-avatar';
 import store from '@/hooks/store';
+import { useMediaQuery } from '@/hooks/window';
 import { TavilyResult } from '@/types/search/resources';
 
 export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => {
@@ -18,8 +19,10 @@ export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => {
 
     const [sameCitationId, setSameCitationId] = useAtom<string>(store.sameCitationAtom);
 
-    const shown = isAllResources ? results : results.slice(0, 3);
-    const hidden = isAllResources ? [] : results.slice(3);
+    const isDesktop = useMediaQuery('(min-width: 768px)');
+
+    const shown = isAllResources ? results : isDesktop ? results.slice(0, 3) : results.slice(0, 2);
+    const hidden = isAllResources ? [] : isDesktop ? results.slice(3) : results.slice(2);
 
     const hiddenCount = hidden.length;
 
@@ -33,7 +36,7 @@ export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => {
                         href={result.url}
                         passHref
                         target='_blank'
-                        className={`h-auto w-3/12 cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-700 dark:hover:text-neutral-200/90 ${sameCitationId == encodeURIComponent(result.url) ? 'dark:bg-neutral-700' : 'dark:bg-neutral-800/70'}`}
+                        className={`h-auto w-1/2 cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-700 dark:hover:text-neutral-200/90 md:w-3/12 ${sameCitationId == encodeURIComponent(result.url) ? 'dark:bg-neutral-700' : 'dark:bg-neutral-800/70'}`}
                         onMouseEnter={() => setSameCitationId(encodeURIComponent(result.url))}
                         onMouseLeave={() => setSameCitationId('')}
                     >
@@ -69,7 +72,7 @@ export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => {
                     </button>
                 ) : (
                     <button
-                        className='h-auto w-3/12 cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:bg-neutral-800/70 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200/90'
+                        className='size-auto cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:bg-neutral-800/70 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200/90 md:w-3/12'
                         onClick={() => setIsAllResources(false)}
                     >
                         <p className='self-center truncate text-xs text-neutral-800/50 dark:text-neutral-200/70'>{t('show_less_resources')}</p>

diff --git a/utils/app/icon.ts b/utils/app/icon.ts