fix:chat mobile layout

Author: Bran18

apps/masterbots.ai/components/routes/chat/chat-layout-section.tsx

@@ -15,14 +15,16 @@ export function ChatLayoutSection({ children }: { children: React.ReactNode }) {
     <section
       ref={sectionRef as React.Ref<HTMLDivElement>}
       className={cn(
-        'flex h-[calc(100vh-4rem)] group w-full overflow-auto animate-in duration-300 ease-in-out relative lg:w-[calc(100%-250px)] xl:w-[calc(100%-300px)] lg:ml-[250px] xl:ml-[300px] scrollbar',
+        'flex h-[calc(100vh-4rem)] group w-full overflow-auto animate-in duration-300 ease-in-out relative',
+        'lg:w-[calc(100%-250px)] xl:w-[calc(100%-300px)] lg:ml-[250px] xl:ml-[300px]',
+        'scrollbar'
       )}
     >
-      <div className="flex flex-col w-full max-w-screen-lg gap-10 pt-5 mx-auto px-4 md:px-10">
-        {children}  {/* Renders children within the centered layout */}
+      <div className="flex flex-col w-full max-w-screen-lg gap-10 px-4 pt-5 mx-auto md:px-10">
+        {children}
       </div>
 
-      {isOpenPopup ? <ThreadPopup /> : ''}
+      <ThreadPopup className={isOpenPopup ? '' : 'hidden'} />
     </section>
   )
 }

apps/masterbots.ai/components/routes/chat/prompt-form.tsx

@@ -34,6 +34,7 @@ import {
 import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
 import { useSidebar } from '@/lib/hooks/use-sidebar'
 import { useThread } from '@/lib/hooks/use-thread'
+import { cn } from '@/lib/utils'
 import type { UseChatHelpers } from 'ai/react'
 import * as React from 'react'
 import Textarea from 'react-textarea-autosize'
@@ -86,9 +87,12 @@ export function PromptForm({
       }}
       ref={formRef}
     >
-      <div
-        className={`relative flex flex-col w-full px-8 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12
-      ${isOpenPopup && isFocused ? ' dark:border-mirage border-iron' : ''}`}
+       <div
+        className={cn(
+          "relative flex flex-col w-full px-8 overflow-hidden grow bg-background sm:rounded-md sm:border sm:px-12",
+          "max-h-[120px] md:max-h-60", // Limit height on mobile
+          isOpenPopup && isFocused ? 'dark:border-mirage border-iron' : ''
+        )}
       >
         <ChatCombobox />
         <Textarea
@@ -103,8 +107,12 @@ export function PromptForm({
           placeholder={placeholder}
           spellCheck={false}
           disabled={disabled}
-          className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
-        />
+          className={cn(
+            "w-full resize-none bg-transparent px-4 focus-within:outline-none sm:text-sm",
+            "min-h-[40px] md:min-h-[60px]", //? Smaller height on mobile
+            "py-2 md:py-[1.3rem]" //? Adjusted padding for mobile
+          )}
+          />
         <div className="absolute right-0 top-4 sm:right-4">
           <Tooltip>
             <TooltipTrigger asChild>

apps/masterbots.ai/components/routes/thread/thread-popup.tsx

@@ -91,20 +91,25 @@ export function ThreadPopup({ className }: { className?: string }) {
   const threadTitleSubHeading = threadTitleChunks?.slice(32).join(' ')
 
   return (
-    <div
-    className={cn(
-      'size-full dark:bg-[#27272A80] lg:max-w-[calc(100%-250px)] xl:max-w-[calc(100%-300px)] flex justify-center items-center fixed top-16 h-[calc(100vh-4rem)] bg-[#F4F4F580] backdrop-blur-sm ease-in-out duration-500 z-[9] transition-all',
-      isOpenPopup ? 'animate-fade-in' : 'hidden animate-fade-out'
-    )}
-  >
     <div
       className={cn(
-        className,
-        `flex flex-col z-10 rounded-lg duration-500 ease-in-out fixed h-full max-h-[90%] 
-        max-w-[1032px] w-[95%] dark:border-mirage border-iron border
-        transition-opacity ${isOpenPopup ? 'animate-fade-in' : 'animate-fade-out'}`
+        'size-full bg-background/80 dark:bg-background/80',
+        'lg:max-w-[calc(100%-250px)] xl:max-w-[calc(100%-300px)]',
+        'flex justify-center items-center fixed top-16',
+        'h-[calc(100vh-4rem)] backdrop-blur-sm ease-in-out duration-500 z-[9]',
+        'transition-all',
+        isOpenPopup ? 'animate-fade-in' : 'animate-fade-out',
+        className
       )}
     >
+     <div
+        className={cn(
+          'flex flex-col z-10 rounded-lg duration-500 ease-in-out fixed',
+          'h-full max-h-[90%] max-w-[1032px] w-[95%]',
+          'dark:border-mirage border-iron border bg-background dark:bg-background',
+          'transition-opacity'
+        )}
+      >
         <div className="relative rounded-t-[8px] px-[32px] py-[20px] dark:bg-[#1E293B] bg-[#E4E4E7]">
           <div className="flex items-center justify-between gap-6">
             <div className="items-center block overflow-y-auto whitespace-pre-line max-h-28 scrollbar small-thumb">
@@ -132,10 +137,14 @@ export function ThreadPopup({ className }: { className?: string }) {
         </div>
 
         <div
-          className="flex flex-col dark:bg-[#18181B] bg-[white] grow rounded-b-[8px] scrollbar h-full 
-          pb-[180px] md:pb-[180px] max-h-[calc(100vh-280px)] md:max-h-[calc(100vh-220px)]"
-          ref={popupContentRef as React.Ref<HTMLDivElement>}
-        >
+        className={cn(
+          "flex flex-col dark:bg-[#18181B] bg-white grow rounded-b-[8px] scrollbar h-full",
+          "pb-[120px] md:pb-[180px]", //? Reduced padding on mobile
+          "max-h-[calc(100vh-240px)] md:max-h-[calc(100vh-220px)]", //? Adjusted height for mobile
+          className
+        )}
+        ref={popupContentRef as React.Ref<HTMLDivElement>}
+      >
           <ChatList
             className="max-w-full !px-[32px] !mx-0"
             isThread={false}